<!-- JEditableTable -->
<!-- @version 1.6.1 -->
<!-- @author sjlei -->
<template>
    <a-spin :spinning="loading">

        <a-row type="flex">
            <a-col>
                <slot name="buttonBefore" :target="getVM()"/>
            </a-col>
            <a-col>
                <!-- 操作按钮 -->
                <div v-if="actionButton" class="action-button">
                    <a-button v-if="buttonPermission('add')" type="primary" icon="plus" @click="handleClickAdd"
                              :disabled="disabled">新增
                    </a-button>
                    <span class="gap"></span>
                    <template v-if="selectedRowIds.length>0">
                        <a-popconfirm
                                :title="`确定要删除这 ${selectedRowIds.length} 项吗?`"
                                @confirm="handleConfirmDelete">
                            <a-button v-if="buttonPermission('batch_delete')" type="primary" icon="minus"
                                      :disabled="disabled">删除
                            </a-button>
                            <span class="gap"></span>
                        </a-popconfirm>
                        <template v-if="showClearSelectButton">
                            <a-button icon="delete" @click="handleClickClearSelection">清空选择</a-button>
                            <span class="gap"></span>
                        </template>
                    </template>
                </div>
            </a-col>
            <a-col>
                <slot name="buttonAfter" :target="getVM()"/>
            </a-col>
        </a-row>

        <slot name="actionButtonAfter" :target="getVM()"/>

        <div :id="`${caseId}inputTable`" class="input-table">
            <!-- 渲染表头 -->
            <div class="thead" ref="thead">
                <div class="tr" :style="{width: this.realTrWidth}">
                    <!-- 左侧固定td  -->
                    <div v-if="dragSort" class="td td-ds" :style="style.tdLeft">
                        <span></span>
                    </div>
                    <div v-if="rowSelection" class="td td-cb" :style="style.tdLeft">
                        <!--:indeterminate="true"-->
                        <a-checkbox
                                :checked="getSelectAll"
                                :indeterminate="getSelectIndeterminate"
                                @change="handleChangeCheckedAll"
                        />
                    </div>
                    <div v-if="rowNumber" class="td td-num" :style="style.tdLeft">
                        <span>#</span>
                    </div>
                    <!-- 右侧动态生成td -->
                    <template v-for="col in columns">
                        <div
                                v-show="col.type !== formTypes.hidden"
                                class="td"
                                :key="col.key"
                                :style="buildTdStyle(col)">

                            <span>{{ col.title }}</span>
                        </div>
                    </template>
                </div>
            </div>

            <div class="scroll-view" ref="scrollView" :style="{'max-height':maxHeight+'px'}">


                <!-- 渲染主体 body -->
                <div :id="`${caseId}tbody`" class="tbody" :style="tbodyStyle">
                    <!-- 扩展高度 -->
                    <div class="tr-expand" :style="`height:${getExpandHeight}px; z-index:${loading?'11':'9'};`"></div>
                    <!-- 无数据时显示 -->
                    <div v-if="rows.length===0" class="tr-nodata">
                        <span>暂无数据</span>
                    </div>
                    <!-- v-model="rows"-->
                    <draggable
                            :value="rows"
                            handle=".td-ds-icons"
                            @start="handleDragMoveStart"
                            @end="handleDragMoveEnd"
                    >

                        <!-- 动态生成tr -->
                        <template v-for="(row,rowIndex) in rows">
                            <!-- tr 只加载可见的和预加载的总共十条数据 -->
                            <div
                                    v-if="
                rowIndex >= parseInt(`${(scrollTop-rowHeight) / rowHeight}`) &&
                  (parseInt(`${scrollTop / rowHeight}`) + 9) > rowIndex
              "
                                    :id="`${caseId}tbody-tr-${rowIndex}`"
                                    :data-idx="rowIndex"
                                    class="tr"
                                    :class="selectedRowIds.indexOf(row.id) !== -1 ? 'tr-checked' : ''"
                                    :style="buildTrStyle(rowIndex)"
                                    :key="row.id"
                                    @click="handleClickTableRow"
                            >
                                <!-- 左侧固定td  -->

                                <div v-if="dragSort" class="td td-ds" :style="style.tdLeft"
                                     @dblclick="_handleRowInsertDown(rowIndex)">
                                    <a-dropdown :trigger="['click']" :getPopupContainer="getParentContainer">
                                        <div class="td-ds-icons">
                                            <a-icon type="align-left"/>
                                            <a-icon type="align-right"/>
                                        </div>

                                        <a-menu slot="overlay">
                                            <a-menu-item key="0" :disabled="rowIndex===0"
                                                         @click="_handleRowMoveUp(rowIndex)">向上移
                                            </a-menu-item>
                                            <a-menu-item key="1" :disabled="rowIndex===(rows.length-1)"
                                                         @click="_handleRowMoveDown(rowIndex)">向下移
                                            </a-menu-item>
                                            <a-menu-divider/>
                                            <a-menu-item key="3" @click="_handleRowInsertDown(rowIndex)">插入一行
                                            </a-menu-item>
                                        </a-menu>
                                    </a-dropdown>
                                </div>

                                <div v-if="rowSelection" class="td td-cb" :style="style.tdLeft">
                                    <!-- 此 v-for 只是为了拼接 id 字符串 -->
                                    <template v-for="(id,i) in [`${row.id}`]">
                                        <a-checkbox
                                                :id="id"
                                                :key="i"
                                                :checked="selectedRowIds.indexOf(id) !== -1"
                                                @change="handleChangeLeftCheckbox"/>
                                    </template>
                                </div>
                                <div v-if="rowNumber" class="td td-num" :style="style.tdLeft">
                                    <span>{{ rowIndex+1 }}</span>
                                </div>
                                <!-- 右侧动态生成td -->
                                <div
                                        class="td"
                                        v-for="col in columns"
                                        v-show="col.type !== formTypes.hidden"
                                        :key="col.key"
                                        :style="buildTdStyle(col)">

                                    <!-- 此 v-for 只是为了拼接 id 字符串 -->
                                    <template v-for="(id,i) in [`${col.key}${row.id}`]">

                                        <!-- native input -->
                                        <label :key="i"
                                               v-if="col.type === formTypes.input || col.type === formTypes.inputNumber">
                                            <a-tooltip v-bind="buildTooltipProps(row, col, id)">
                                                <input
                                                        v-if="isEditRow(row, col)"
                                                        :id="id"
                                                        v-bind="buildProps(row,col)"
                                                        :data-input-number="col.type === formTypes.inputNumber"
                                                        :placeholder="replaceProps(col, col.placeholder)"
                                                        @blur="(e)=>{handleBlurCommono(e.target,rowIndex,row,col)}"
                                                        @input="(e)=>{handleInputCommono(e.target,rowIndex,row,col)}"
                                                />
                                                <span
                                                        v-else
                                                        class="j-td-span no-edit"
                                                        :class="{disabled: buildProps(row,col).disabled}"
                                                        @click="handleEditRow(row, col)"
                                                >{{ inputValues[rowIndex][col.key] }}</span>
                                            </a-tooltip>
                                        </label>
                                        <!-- checkbox -->
                                        <template v-else-if="col.type === formTypes.checkbox">
                                            <a-checkbox
                                                    :key="i"
                                                    :id="id"
                                                    v-bind="buildProps(row,col)"
                                                    :checked="checkboxValues[id]"
                                                    @change="(e)=>handleChangeCheckboxCommon(e,row,col)"
                                            />
                                        </template>
                                        <!-- select -->
                                        <template v-else-if="col.type === formTypes.select">
                                            <a-tooltip v-bind="buildTooltipProps(row, col, id)">
                                                <a-select
                                                        v-if="isEditRow(row, col)"
                                                        :id="id"
                                                        :key="i"
                                                        v-bind="buildProps(row,col)"
                                                        style="width: 100%;"
                                                        :value="selectValues[id]"
                                                        :options="col.options"
                                                        :getPopupContainer="getParentContainer"
                                                        :placeholder="replaceProps(col, col.placeholder)"
                                                        :filterOption="(i,o)=>handleSelectFilterOption(i,o,col)"
                                                        :maxTagCount="1"
                                                        @change="(v)=>handleChangeSelectCommon(v,id,row,col)"
                                                        @search="(v)=>handleSearchSelect(v,id,row,col)"
                                                        @blur="(v)=>handleBlurSearch(v,id,row,col)"
                                                        allowClear
                                                />
                                                <span
                                                        v-else
                                                        class="j-td-span no-edit"
                                                        :class="{disabled: buildProps(row,col).disabled}"
                                                        @click.stop="handleEditRow(row, col)"
                                                >{{ getSelectTranslateText(selectValues[id], row, col) }}</span>
                                            </a-tooltip>
                                        </template>

                                        <!-- 部门选择 -->
                                        <template v-else-if="col.type === formTypes.sel_depart">
                                            <a-tooltip v-bind="buildTooltipProps(row, col, id)">
                                                <j-select-depart
                                                        v-if="isEditRow(row, col)"
                                                        :id="id"
                                                        :key="i"
                                                        v-bind="buildProps(row,col)"
                                                        style="width: 100%;"
                                                        :value="departCompValues[id]"
                                                        :placeholder="replaceProps(col, col.placeholder)"
                                                        :trigger-change="true"
                                                        :multi="true"
                                                        @change="(v)=>handleChangeDepartCommon(v,id,row,col)"
                                                />
                                                <span
                                                        v-else
                                                        class="j-td-span no-edit"
                                                        :class="{disabled: buildProps(row,col).disabled}"
                                                        @click="handleEditRow(row, col)"
                                                >{{ departCompValues[id] }}</span>
                                            </a-tooltip>
                                        </template>

                                        <!-- 用户选择 -->
                                        <template v-else-if="col.type === formTypes.sel_user">
                                            <a-tooltip v-bind="buildTooltipProps(row, col, id)">
                                                <j-select-user-by-dep
                                                        v-if="isEditRow(row, col)"
                                                        :id="id"
                                                        :key="i"
                                                        v-bind="buildProps(row,col)"
                                                        style="width: 100%;"
                                                        :value="userCompValues[id]"
                                                        :placeholder="replaceProps(col, col.placeholder)"
                                                        :trigger-change="true"
                                                        :multi="true"
                                                        @change="(v)=>handleChangeUserCommon(v,id,row,col)"
                                                />
                                                <span
                                                        v-else
                                                        class="j-td-span no-edit"
                                                        :class="{disabled: buildProps(row,col).disabled}"
                                                        @click="handleEditRow(row, col)"
                                                >{{ userCompValues[id] }}</span>
                                            </a-tooltip>
                                        </template>

                                        <!-- date -->
                                        <template
                                                v-else-if="col.type === formTypes.date || col.type === formTypes.datetime">
                                            <a-tooltip v-bind="buildTooltipProps(row, col, id)">
                                                <j-date
                                                        v-if="isEditRow(row, col)"
                                                        :id="id"
                                                        :key="i"
                                                        v-bind="buildProps(row,col)"
                                                        style="width: 100%;"
                                                        :value="jdateValues[id]"
                                                        :getCalendarContainer="getParentContainer"
                                                        :placeholder="replaceProps(col, col.placeholder)"
                                                        :trigger-change="true"
                                                        :showTime="col.type === formTypes.datetime"
                                                        :dateFormat="col.type === formTypes.date? 'YYYY-MM-DD':'YYYY-MM-DD HH:mm:ss'"
                                                        allowClear
                                                        @change="(v)=>handleChangeJDateCommon(v,id,row,col,col.type === formTypes.datetime)"
                                                />
                                                <span
                                                        v-else
                                                        class="j-td-span no-edit"
                                                        :class="{disabled: buildProps(row,col).disabled}"
                                                        @click="handleEditRow(row, col)"
                                                >{{ jdateValues[id] }}</span>
                                            </a-tooltip>
                                        </template>
                                        <!-- input_pop -->
                                        <template v-else-if="col.type === formTypes.input_pop">
                                            <a-tooltip v-bind="buildTooltipProps(row, col, id)">
                                                <j-input-pop
                                                        v-if="isEditRow(row, col)"
                                                        :id="id"
                                                        :key="i"
                                                        :width="300"
                                                        :height="210"
                                                        :pop-container="`${caseId}tbody`"
                                                        v-bind="buildProps(row,col)"
                                                        style="width: 100%;"
                                                        :value="jInputPopValues[id]"
                                                        :getCalendarContainer="getParentContainer"
                                                        :placeholder="replaceProps(col, col.placeholder)"
                                                        @change="(v)=>handleChangeJInputPopCommon(v,id,row,col)"
                                                />
                                                <span
                                                        v-else
                                                        class="j-td-span no-edit"
                                                        :class="{disabled: buildProps(row,col).disabled}"
                                                        @click="handleEditRow(row, col)"
                                                >{{ jInputPopValues[id] }}</span>
                                            </a-tooltip>
                                        </template>
                                        <!-- upload -->
                                        <div v-else-if="col.type === formTypes.upload" :key="i">
                                            <template v-if="uploadValues[id] != null"
                                                      v-for="(file,fileKey) of [(uploadValues[id]||{})]">
                                                <a-input
                                                        :key="fileKey"
                                                        :readOnly="true"
                                                        :value="file.name"
                                                >

                                                    <template slot="addonBefore" style="width: 30px">
                                                        <a-tooltip v-if="file.status==='uploading'"
                                                                   :title="`上传中(${Math.floor(file.percent)}%)`">
                                                            <a-icon type="loading"/>
                                                        </a-tooltip>
                                                        <a-tooltip v-else-if="file.status==='done'" title="上传完成">
                                                            <a-icon type="check-circle" style="color:#00DB00;"/>
                                                        </a-tooltip>
                                                        <a-tooltip v-else title="上传失败">
                                                            <a-icon type="exclamation-circle" style="color:red;"/>
                                                        </a-tooltip>
                                                    </template>

                                                    <template
                                                            v-if="col.allowDownload!==false || col.allowRemove!==false"
                                                            slot="addonAfter" style="width: 30px">
                                                        <a-dropdown :trigger="['click']" placement="bottomRight"
                                                                    :getPopupContainer="getParentContainer">
                                                            <a-tooltip title="操作"
                                                                       :getPopupContainer="getParentContainer">
                                                                <a-icon
                                                                        v-if="file.status!=='uploading'"
                                                                        type="setting"
                                                                        style="cursor: pointer;"/>
                                                            </a-tooltip>

                                                            <a-menu slot="overlay">
                                                                <a-menu-item v-if="col.allowDownload!==false"
                                                                             @click="handleClickDownloadFile(id)">
                                                                    <span><a-icon type="download"/>&nbsp;下载</span>
                                                                </a-menu-item>
                                                                <a-menu-item v-if="col.allowRemove!==false"
                                                                             @click="handleClickDelFile(id)">
                                                                    <span><a-icon type="delete"/>&nbsp;删除</span>
                                                                </a-menu-item>
                                                            </a-menu>
                                                        </a-dropdown>
                                                    </template>

                                                </a-input>
                                            </template>

                                            <div :hidden="uploadValues[id] != null">
                                                <a-tooltip v-bind="buildTooltipProps(row, col, id)">
                                                    <a-upload
                                                            name="file"
                                                            :data="{'isup':1}"
                                                            :multiple="false"
                                                            :action="col.action"
                                                            :headers="uploadGetHeaders(row,col)"
                                                            :showUploadList="false"
                                                            v-bind="buildProps(row,col)"
                                                            @change="(v)=>handleChangeUpload(v,id,row,col)"
                                                    >
                                                        <a-button icon="upload">{{ col.placeholder }}</a-button>
                                                    </a-upload>
                                                </a-tooltip>
                                            </div>

                                        </div>

                                        <!-- update-begin-author:taoyan date:0827 for：popup -->
                                        <template v-else-if="col.type === formTypes.popup">
                                            <a-tooltip v-bind="buildTooltipProps(row, col, id)">
                                                <j-popup
                                                        v-if="isEditRow(row, col)"
                                                        :id="id"
                                                        :key="i"
                                                        v-bind="buildProps(row,col)"
                                                        :placeholder="replaceProps(col, col.placeholder)"
                                                        style="width: 100%;"
                                                        :value="getPopupValue(id)"
                                                        :field="col.field || col.key"
                                                        :org-fields="col.orgFields"
                                                        :dest-fields="col.destFields"
                                                        :code="col.popupCode"
                                                        :groupId="caseId"
                                                        @input="(value,others)=>popupCallback(value,others,id,row,col,rowIndex)"
                                                />
                                                <span
                                                        v-else
                                                        class="j-td-span no-edit"
                                                        :class="{disabled: buildProps(row,col).disabled}"
                                                        @click="handleEditRow(row, col)"
                                                >{{ getPopupValue(id) }}</span>
                                            </a-tooltip>
                                        </template>
                                        <!-- update-end-author:taoyan date:0827 for：popup -->

                                        <!-- update-beign-author:taoyan date:0827 for：文件/图片逻辑新增 -->
                                        <div v-else-if="col.type === formTypes.file" :key="i">
                                            <template v-if="uploadValues[id] != null"
                                                      v-for="(file,fileKey) of [(uploadValues[id]||{})]">
                                                <div :key="fileKey" style="position: relative;">
                                                    <a-tooltip v-if="file.status==='uploading'"
                                                               :title="`上传中(${Math.floor(file.percent)}%)`">
                                                        <a-icon type="loading" style="color:red;"/>
                                                        <span style="color:red;margin-left:5px">{{  file.status }}</span>
                                                    </a-tooltip>

                                                    <a-tooltip v-else-if="file.status==='done'" :title="file.name">
                                                        <a-icon type="paper-clip"/>
                                                        <span style="margin-left:5px">{{ getEllipsisWord(file.name,5) }}</span>
                                                    </a-tooltip>

                                                    <a-tooltip v-else :title="file.name">
                                                        <a-icon type="paper-clip" style="color:red;"/>
                                                        <span style="color:red;margin-left:5px">{{ getEllipsisWord(file.name,5) }}</span>
                                                    </a-tooltip>

                                                    <template style="width: 30px">
                                                        <a-dropdown :trigger="['click']" placement="bottomRight"
                                                                    :getPopupContainer="getParentContainer"
                                                                    style="margin-left: 10px;">
                                                            <a-tooltip title="操作"
                                                                       :getPopupContainer="getParentContainer">
                                                                <a-icon v-if="file.status!=='uploading'" type="setting"
                                                                        style="cursor: pointer;"/>
                                                            </a-tooltip>

                                                            <a-menu slot="overlay">
                                                                <a-menu-item v-if="col.allowDownload!==false"
                                                                             @click="handleClickDownFileByUrl(id)">
                                                                    <span><a-icon type="download"/>&nbsp;下载</span>
                                                                </a-menu-item>
                                                                <a-menu-item @click="handleClickDelFile(id)">
                                                                    <span><a-icon type="delete"/>&nbsp;删除</span>
                                                                </a-menu-item>
                                                                <a-menu-item @click="handleMoreOperation(id,col,col)">
                                                                    <span><a-icon type="bars"/> 更多</span>
                                                                </a-menu-item>
                                                            </a-menu>
                                                        </a-dropdown>
                                                    </template>
                                                </div>
                                            </template>

                                            <div :hidden="uploadValues[id] != null">
                                                <a-tooltip v-bind="buildTooltipProps(row, col, id)">
                                                    <a-upload
                                                            name="file"
                                                            :data="{'isup':1}"
                                                            :multiple="false"
                                                            :action="getUploadAction(col.action)"
                                                            :headers="uploadGetHeaders(row,col)"
                                                            :showUploadList="false"
                                                            v-bind="buildProps(row,col)"
                                                            @change="(v)=>handleChangeUpload(v,id,row,col)"
                                                    >
                                                        <a-button icon="upload">上传文件</a-button>
                                                    </a-upload>
                                                </a-tooltip>
                                            </div>

                                        </div>

                                        <div v-else-if="col.type === formTypes.image" :key="i">
                                            <template v-if="uploadValues[id] != null"
                                                      v-for="(file,fileKey) of [(uploadValues[id]||{})]">
                                                <div :key="fileKey" style="position: relative;">
                                                    <template
                                                            v-if="!uploadValues[id] || !(uploadValues[id]['url'] || uploadValues[id]['path'] || uploadValues[id]['message'])">
                                                        <a-icon type="loading"/>
                                                    </template>
                                                    <template v-else-if="uploadValues[id]['path']">
                                                        <img class="j-editable-image" :src="getCellImageView(id)"
                                                             alt="无图片" @click="handleMoreOperation(id,'img',col)"/>
                                                    </template>
                                                    <template v-else>
                                                        <a-icon type="exclamation-circle" style="color: red;"
                                                                @click="handleClickShowImageError(id)"/>
                                                    </template>
                                                    <template slot="addonBefore" style="width: 30px">
                                                        <a-tooltip v-if="file.status==='uploading'"
                                                                   :title="`上传中(${Math.floor(file.percent)}%)`">
                                                            <a-icon type="loading"/>
                                                        </a-tooltip>
                                                        <a-tooltip v-else-if="file.status==='done'" title="上传完成">
                                                            <a-icon type="check-circle" style="color:#00DB00;"/>
                                                        </a-tooltip>
                                                        <a-tooltip v-else title="上传失败">
                                                            <a-icon type="exclamation-circle" style="color:red;"/>
                                                        </a-tooltip>
                                                    </template>

                                                    <template style="width: 30px">
                                                        <a-dropdown :trigger="['click']" placement="bottomRight"
                                                                    :getPopupContainer="getParentContainer"
                                                                    style="margin-left: 10px;">
                                                            <a-tooltip title="操作"
                                                                       :getPopupContainer="getParentContainer">
                                                                <a-icon
                                                                        v-if="file.status!=='uploading'"
                                                                        type="setting"
                                                                        style="cursor: pointer;"/>
                                                            </a-tooltip>

                                                            <a-menu slot="overlay">
                                                                <a-menu-item v-if="col.allowDownload!==false"
                                                                             @click="handleClickDownFileByUrl(id)">
                                                                    <span><a-icon type="download"/>&nbsp;下载</span>
                                                                </a-menu-item>
                                                                <a-menu-item @click="handleClickDelFile(id)">
                                                                    <span><a-icon type="delete"/>&nbsp;删除</span>
                                                                </a-menu-item>
                                                                <a-menu-item @click="handleMoreOperation(id,'img',col)">
                                                                    <span><a-icon type="bars"/> 更多</span>
                                                                </a-menu-item>
                                                            </a-menu>
                                                        </a-dropdown>
                                                    </template>

                                                </div>
                                            </template>

                                            <div :hidden="uploadValues[id] != null">
                                                <a-tooltip v-bind="buildTooltipProps(row, col, id)">
                                                    <a-upload
                                                            name="file"
                                                            :data="{'isup':1}"
                                                            :multiple="false"
                                                            :action="getUploadAction(col.action)"
                                                            :headers="uploadGetHeaders(row,col)"
                                                            :showUploadList="false"
                                                            v-bind="buildProps(row,col)"
                                                            @change="(v)=>handleChangeUpload(v,id,row,col)"
                                                    >
                                                        <a-button icon="upload">上传图片</a-button>
                                                    </a-upload>
                                                </a-tooltip>
                                            </div>

                                        </div>
                                        <!-- update-end-author:taoyan date:0827 for：图片逻辑新增 -->

                                        <!-- radio-begin -->
                                        <template v-else-if="col.type === formTypes.radio">
                                            <a-tooltip v-bind="buildTooltipProps(row, col, id)">
                                                <a-radio-group
                                                        :id="id"
                                                        :key="i"
                                                        v-bind="buildProps(row,col)"
                                                        :value="radioValues[id]"
                                                        @change="(e)=>handleRadioChange(e.target.value,id,row,col)">
                                                    <a-radio v-for="(item, key) in col.options" :key="key"
                                                             :value="item.value">{{ item.text }}
                                                    </a-radio>
                                                </a-radio-group>
                                            </a-tooltip>
                                        </template>
                                        <!-- radio-end -->

                                        <!-- select多选 -begin -->
                                        <template v-else-if="col.type === formTypes.list_multi">
                                            <a-tooltip v-bind="buildTooltipProps(row, col, id)">
                                                <a-select
                                                        v-if="isEditRow(row, col)"
                                                        :id="id"
                                                        :key="i"
                                                        mode="multiple"
                                                        :maxTagCount="1"
                                                        v-bind="buildProps(row,col)"
                                                        style="width: 100%;"
                                                        :value="multiSelectValues[id]"
                                                        :options="col.options"
                                                        :getPopupContainer="getParentContainer"
                                                        :placeholder="replaceProps(col, col.placeholder)"
                                                        @change="(v)=>handleMultiSelectChange(v,id,row,col)"
                                                        allowClear
                                                />
                                                <span
                                                        v-else
                                                        class="j-td-span no-edit"
                                                        :class="{disabled: buildProps(row,col).disabled}"
                                                        @click="handleEditRow(row, col)"
                                                >{{ getSelectTranslateText(multiSelectValues[id], row, col) }} </span>
                                            </a-tooltip>
                                        </template>
                                        <!-- select多选 -end -->

                                        <!-- select搜索 -begin -->
                                        <template v-else-if="col.type === formTypes.sel_search">
                                            <a-tooltip v-bind="buildTooltipProps(row, col, id)">
                                                <a-select
                                                        v-if="isEditRow(row, col)"
                                                        :id="id"
                                                        :key="i"
                                                        showSearch
                                                        optionFilterProp="children"
                                                        :filterOption="filterOption"
                                                        v-bind="buildProps(row,col)"
                                                        style="width: 100%;"
                                                        :value="searchSelectValues[id]"
                                                        :options="col.options"
                                                        :getPopupContainer="getParentContainer"
                                                        :placeholder="replaceProps(col, col.placeholder)"
                                                        @change="(v)=>handleSearchSelectChange(v,id,row,col)"
                                                        allowClear
                                                />
                                                <span
                                                        v-else
                                                        class="j-td-span no-edit"
                                                        :class="{disabled: buildProps(row,col).disabled}"
                                                        @click="handleEditRow(row, col)"
                                                >{{ getSelectTranslateText(searchSelectValues[id], row, col) }}</span>
                                            </a-tooltip>
                                        </template>
                                        <!-- select搜索 -end -->

                                        <div v-else-if="col.type === formTypes.slot" :key="i">
                                            <a-tooltip v-bind="buildTooltipProps(row, col, id)">
                                                <slot
                                                        :name="(col.slot || col.slotName) || col.key"
                                                        :index="rowIndex"
                                                        :text="slotValues[id]"
                                                        :value="slotValues[id]"
                                                        :column="col"
                                                        :rowId="getCleanId(row.id)"
                                                        :getValue="()=>_getValueForSlot(row.id)"
                                                        :caseId="caseId"
                                                        :allValues="_getAllValuesForSlot()"
                                                        :target="getVM()"
                                                        :handleChange="(v)=>handleChangeSlotCommon(v,id,row,col)"
                                                        :isNotPass="notPassedIds.includes(col.key+row.id)"
                                                />
                                            </a-tooltip>
                                        </div>

                                        <!-- else (normal) -->
                                        <span v-else :key="i" v-bind="buildProps(row,col)">{{ inputValues[rowIndex][col.key] }}</span>
                                    </template>
                                </div>
                            </div>
                            <!-- -- tr end -- -->

                        </template>
                    </draggable>


                    <!-- 统计行 -->
                    <div
                            v-if="showStatisticsRow"
                            class="tr"
                            :style="{
              ...buildTrStyle(rows.length),
              height: '32px'
            }"
                    >
                        <div v-if="dragSort" class="td td-ds" :style="style.tdLeft">
                        </div>
                        <div v-if="rowSelection" class="td td-cb" :style="style.tdLeft">
                            统计
                        </div>
                        <div v-if="rowNumber" class="td td-num" :style="style.tdLeft">
                            <span v-if="!rowSelection">统计</span>
                        </div>

                        <!-- 右侧动态生成td -->
                        <template v-for="col in columns">
                            <div
                                    :key="col.key"
                                    class="td"
                                    v-show="col.type !== formTypes.hidden"
                                    :style="buildTdStyle(col)"
                            >
                <span
                        v-show="col.type === formTypes.inputNumber"
                        style="padding: 0 5px;"
                >{{statisticsColumns[col.key]}}</span>
                            </div>
                        </template>

                    </div>

                </div>
            </div>
            <j-file-pop ref="filePop" @ok="handleFileSuccess" :number="number"></j-file-pop>
        </div>
    </a-spin>
</template>

<script>
    import Vue from 'vue'
    import Draggable from 'vuedraggable'
    import { ACCESS_TOKEN } from '@/store/mutation-types'
    import { FormTypes, VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil'
    import { cloneObject, randomString, randomNumber, getEventPath } from '@/utils/util'
    import JDate from '@/components/jeecg/JDate'
    import { filterDictText, initDictOptions } from '@/components/dict/JDictSelectUtil'
    import { getFileAccessHttpUrl } from '@/api/manage'
    import JInputPop from '@/components/jeecg/minipop/JInputPop'
    import JFilePop from '@/components/jeecg/minipop/JFilePop'
    import { getNoAuthCols } from '@/utils/authFilter'

    // 行高，需要在实例加载完成前用到
    let rowHeight = 61

    export default {
        name: 'JEditableTable',
        components: { JDate, Draggable, JInputPop, JFilePop },
        provide() {
            return {
                parentIsJEditableTable: true,
                getDestroyCleanGroupRequest: () => this.destroyCleanGroupRequest
            }
        },
        props: {
            // 列信息
            columns: {
                type: Array,
                required: true
            },
            // 数据源
            dataSource: {
                type: Array,
                required: true,
                default: () => []
            },
            // 是否显示操作按钮
            actionButton: {
                type: Boolean,
                default: false
            },
            // 是否显示行号
            rowNumber: {
                type: Boolean,
                default: false
            },
            // 是否可选择行
            rowSelection: {
                type: Boolean,
                default: false
            },
            // 页面是否在加载中
            loading: {
                type: Boolean,
                default: false
            },
            // 表格内容区域最大高度
            maxHeight: {
                type: Number,
                default: 400
            },
            // 要禁用的行
            disabledRows: {
                type: Object,
                default() {
                    return {}
                }
            },
            // 是否禁用全部组件
            disabled: {
                type: Boolean,
                default: false
            },
            // 是否可拖拽排序
            dragSort: {
                type: Boolean,
                default: false
            },
            dragSortKey: {
                type: String,
                default: 'orderNum'
            },
            // 是否一直显示编辑框，如果为false则只有点击的时候才出现输入框
            alwaysEdit: {
                type: Boolean,
                default: true
            },
            authPre: {
                type: String,
                required: false,
                default: ''
            }
        },
        data() {
            return {
                // 是否首次运行
                isFirst: true,
                // 当前实例是否是行编辑
                isJEditableTable: true,
                // caseId，用于防止有多个实例的时候会冲突
                caseId: `_jet-${randomString(6)}-`,
                // 临时ID标识，凡是以该标识结尾的ID都是临时ID，不添加到数据库中
                tempId: `_tid-${randomString(6)}`,
                // 存储document element 对象
                el: {
                    inputTable: null,
                    tbody: null
                },
                // 存储各个div的style
                style: {
                    // 'max-height': '400px'
                    tbody: { left: '0px' },
                    // 左侧固定td的style
                    tdLeft: {}
                },
                // 表单的类型
                formTypes: FormTypes,
                // 行数据
                rows: [],
                // 行高，height + padding + border
                rowHeight,
                // 滚动条顶部距离
                scrollTop: 0,
                // 绑定 select 的值
                selectValues: {},
                // 绑定 checkbox 的值
                checkboxValues: {},
                // 绑定 jdate 的值
                jdateValues: {},
                // 绑定jinputpop
                jInputPopValues: {},
                // 绑定插槽数据
                slotValues: {},
                // file 信息
                uploadValues: {},
                //popup信息
                popupValues: {},
                //部门组件信息
                departCompValues: {},
                //用户组件信息
                userCompValues: {},

                radioValues: {},
                metaCheckboxValues: {},
                multiSelectValues: {},
                searchSelectValues: {},
                // 绑定左侧选择框已选择的id
                selectedRowIds: [],
                // 存储被删除行的id
                deleteIds: [],
                // 存储显示tooltip的信息
                tooltips: {},
                // 存储没有通过验证的inputId
                notPassedIds: [],

                // 当前是否正在拖拽排序
                dragging: false,
                // 是否有统计列
                hasStatisticsColumn: false,
                statisticsColumns: {},
                // 只有在行编辑被销毁时才主动清空GroupRequest的内存
                destroyCleanGroupRequest: false,
                // 当前正在编辑的行的id
                currentEditRows: {},
                // 上次push数据的事件，用于判断是否点击过快
                lastPushTimeMap: new Map(),
                number: 0,
                //不显示的按钮编码
                excludeCode: []
            }
        },
        created() {
            this.inputValues = []
            // 当前显示的tr
            this.visibleTrEls = []
            this.disabledRowIds = (this.disabledRowIds || [])
            // 解决火狐浏览器下拖拽会打开新的Tab的问题
            document.body.ondrop = (event) => {
                if (this.dragging) {
                    event.preventDefault()
                    event.stopPropagation()
                }
            }
        },
        // 计算属性
        computed: {
            // expandHeight = rows.length * rowHeight
            getExpandHeight() {
                let length = this.rows.length * this.rowHeight
                if (this.showStatisticsRow) {
                    length += 34
                }
                return length
            },
            // 是否显示统计行
            showStatisticsRow() {
                return this.hasStatisticsColumn && this.rows.length > 0
            },
            // 获取是否选择了部分
            getSelectIndeterminate() {
                return (this.selectedRowIds.length > 0 &&
                    this.selectedRowIds.length < this.rows.length)
            },
            // 获取是否选择了全部
            getSelectAll() {
                return (this.selectedRowIds.length === this.rows.length) && this.rows.length > 0
            },
            tbodyStyle() {
                let style = Object.assign({}, this.style.tbody)
                // style['max-height'] = `${this.maxHeight}px`
                style['width'] = this.realTrWidth
                return style
            },
            showClearSelectButton() {
                let count = 0
                for (let key in this.disabledRows) {
                    if (this.disabledRows.hasOwnProperty(key)) count++
                }
                return count > 0
            },
            accessToken() {
                return Vue.ls.get(ACCESS_TOKEN)
            },
            realTrWidth() {
                let splice = ' + '
                let calcWidth = 'calc('
                this.columns.forEach((column, i) => {
                    let { type, width } = column
                    // 隐藏字段不参与计算
                    if (type !== FormTypes.hidden) {
                        if (typeof width === 'number') {
                            calcWidth += width + 'px'
                        } else if (typeof width === 'string') {
                            calcWidth += width
                        } else {
                            calcWidth += '120px'
                        }
                        calcWidth += splice
                    }
                })
                if (calcWidth.endsWith(splice)) {
                    calcWidth = calcWidth.substring(0, calcWidth.length - splice.length)
                }
                calcWidth += ')'
                // console.log('calcWidth: ', calcWidth)
                return calcWidth
            }
        },
        // 侦听器
        watch: {
            rows: {
                immediate: true,
                handler(val, old) {
                    // val.forEach(item => {
                    //   for (let inputValue of  this.inputValues) {
                    //     if (inputValue.id === item.id) {
                    //       item['dbFieldName'] = inputValue['dbFieldName']
                    //       break
                    //     }
                    //   }
                    // })
                    // console.log('watch.rows:', cloneObject({ val, old }))
                }
            },
            dataSource: {
                immediate: true,
                handler: function(newValue) {
                    // 兼容IE
                    this.getElementPromise('tbody').then(() => {
                        this.initialize()
                        this._pushByDataSource(newValue)
                    })
                }
            },
            columns: {
                immediate: true,
                handler(columns) {
                    //列改变的时候重新设置按钮权限信息
                    this.loadExcludeCode()
                    // 兼容IE
                    this.getElementPromise('tbody').then(() => {
                        columns.forEach(column => {
                            if (column.type === FormTypes.select || column.type === FormTypes.list_multi || column.type === FormTypes.sel_search) {
                                // 兼容 旧版本 options
                                if (column.options instanceof Array) {
                                    column.options = column.options.map(item => {
                                        if (item) {
                                            return {
                                                ...item,
                                                text: item.text || item.title,
                                                title: item.text || item.title
                                            }
                                        }
                                        return {}
                                    })
                                }
                                if (column.dictCode) {
                                    this._loadDictConcatToOptions(column)
                                }
                            }
                        })
                    })
                }
            },
            // 当selectRowIds改变时触发事件
            selectedRowIds(newValue) {
                this.$emit('selectRowChange', cloneObject(newValue).map(i => this.getCleanId(i)))
            }
        },
        mounted() {
            let vm = this
            /** 监听滚动条事件 */
            this.getElement('inputTable').onscroll = function(event) {
                vm.syncScrollBar(event.target.scrollLeft)
            }
            this.getElement('tbody').onscroll = function(event) {
                // vm.recalcTrHiddenItem(event.target.scrollTop)
            }

            let { thead, scrollView } = this.$refs
            scrollView.onscroll = function(event) {

                // console.log(event.target.scrollTop, ' - ', event.target.scrollLeft)

                thead.scrollLeft = event.target.scrollLeft

                vm.recalcTrHiddenItem(event.target.scrollTop)

            }

            // 添加事件监听
            this.addEventListener()

        },
        methods: {

            getElement(id, noCaseId = false) {
                if (!this.el[id]) {
                    this.el[id] = document.getElementById((noCaseId ? '' : this.caseId) + id)
                }
                return this.el[id]
            },

            getElementPromise(id, noCaseId = false) {
                return new Promise((resolve) => {
                    let timer = setInterval(() => {
                        let element = this.getElement(id, noCaseId)
                        if (element) {
                            clearInterval(timer)
                            resolve(element)
                        }
                    }, 10)
                })
            },

            /** 初始化列表 */
            initialize() {
                this.visibleTrEls = []
                // 判断是否是首次进入该方法，如果是就不清空行，防止删除了预添加的数据
                if (!this.isFirst) {
                    this.clearRow()
                } else {
                    this.isFirst = false
                }
            },
            /**清空行*/
            clearRow() {
                // inputValues：用来存储input表单的值
                // 数组里的每项都是一个对象，对象里每个key都是input的rowKey，值就是input的值，其中有个id的字段来区分
                // 示例：
                // [{
                //    id: "_jet-4sp0iu-15541771111770"
                //    dbDefaultVal: "aaa",
                //    dbFieldName: "bbb",
                //    dbFieldTxt: "ccc",
                //    dbLength: 32
                // }]
                this.inputValues = []
                this.rows = []
                this.deleteIds = []
                this.selectValues = {}
                this.checkboxValues = {}
                this.jdateValues = {}
                this.jInputPopValues = {}
                this.departCompValues = {}
                this.userCompValues = {}
                this.slotValues = {}
                this.selectedRowIds = []
                this.tooltips = {}
                this.notPassedIds = []
                this.uploadValues = []
                this.popupValues = []
                this.radioValues = []
                this.multiSelectValues = []
                this.searchSelectValues = []
                this.scrollTop = 0
                this.$nextTick(() => {
                    this.getElement('tbody').scrollTop = 0
                })
            },
            /** 同步滚动条状态 */
            syncScrollBar(scrollLeft) {
                // this.style.tbody.left = `${scrollLeft}px`
                // this.getElement('tbody').scrollLeft = scrollLeft
            },
            /** 重置滚动条位置，参数留空则滚动到上次记录的位置 */
            resetScrollTop(top) {
                let { scrollView } = this.$refs
                if (top != null && typeof top === 'number') {
                    scrollView.scrollTop = top
                } else {
                    scrollView.scrollTop = this.scrollTop
                }
            },
            /** 重新计算需要隐藏或显示的tr */
            recalcTrHiddenItem(top) {
                let diff = top - this.scrollTop
                if (diff < 0) {
                    diff = this.scrollTop - top
                }
                // 只有在滚动了百分之三十的行高的距离时才进行更新
                if (diff >= this.rowHeight * 0.3) {
                    this.scrollTop = top
                    // 更新form表单的值
                    this.$nextTick(() => {
                        this.updateFormValues()
                    })
                }
            },
            /** 生成id */
            generateId(rows) {
                if (!(rows instanceof Array)) {
                    rows = this.rows || []
                }
                let timestamp = new Date().getTime()
                return `${this.caseId}${timestamp}${rows.length}${randomNumber(6)}${this.tempId}`
            },
            /** push 一条数据 */
            push(record, update = true, rows, insertIndex = null, setDefaultValue = true) {
                return this._pushByDataSource([record], [insertIndex], update, rows, setDefaultValue)
            },

            /**
             * push 数据
             *
             * @param dataSource 数据源
             * @param insertIndexes 行插入位置，和dataSource的下标一一对应
             * @param update 是否更新
             * @param rows 若不传就使用 this.rows
             * @param setDefaultValue 是否填充默认值
             *
             */
            _pushByDataSource(dataSource, insertIndexes = null, update = true, rows = null, setDefaultValue = false) {
                if (!(rows instanceof Array)) {
                    rows = [...this.rows] || []
                }
                let checkboxValues = { ...this.checkboxValues }
                let selectValues = { ...this.selectValues }
                let jdateValues = { ...this.jdateValues }
                let departCompValues = { ...this.departCompValues }
                let userCompValues = { ...this.userCompValues }
                let jInputPopValues = { ...this.jInputPopValues }
                let slotValues = { ...this.slotValues }
                let uploadValues = { ...this.uploadValues }
                let popupValues = { ...this.popupValues }
                let radioValues = { ...this.radioValues }
                let multiSelectValues = { ...this.multiSelectValues }
                let searchSelectValues = { ...this.searchSelectValues }
                // 禁用行的id
                let disabledRowIds = (this.disabledRowIds || [])
                dataSource.forEach((data, newValueIndex) => {
                    // 不能直接更改数据源的id
                    let dataId = data.id
                    // 判断源数据是否带有id
                    if (dataId == null || dataId === '') {
                        dataId = this.generateId(rows)
                    } else if (!this.hasCaseId(dataId)) {
                        dataId = this.caseId + dataId
                    }
                    let row = { id: dataId }
                    let value = { id: dataId }
                    let disabled = false
                    this.columns.forEach(column => {
                        let inputId = column.key + value.id
                        let sourceValue = (data[column.key] == null ? '' : data[column.key]).toString()

                        let defaultValue = null
                        if (setDefaultValue) {
                            defaultValue = column.defaultValue || (column.defaultValue === 0 ? 0 : '')
                            if (defaultValue instanceof Array) {
                                defaultValue = defaultValue.join(',')
                            }

                            sourceValue = (typeof sourceValue === 'number' || sourceValue) ? sourceValue : defaultValue
                        }
                        let sourceValueIsEmpty = (sourceValue == null || sourceValue === '')

                        if (column.type === FormTypes.inputNumber) {
                            // 判断是否是排序字段，如果是就赋最大值
                            if (column.isOrder === true) {
                                value[column.key] = this.getInputNumberMaxValue(column) + 1
                            } else {
                                value[column.key] = sourceValue
                            }
                            // 判断是否是统计列
                            if (column.statistics) {
                                this.hasStatisticsColumn = true
                                if (!this.statisticsColumns[column.key]) {
                                    this.$set(this.statisticsColumns, column.key, 0)
                                }
                            }

                        } else if (column.type === FormTypes.checkbox) {
                            // 判断是否设定了customValue（自定义值）
                            if (column.customValue instanceof Array) {
                                let customValue = (column.customValue[0] || '').toString()
                                if (sourceValueIsEmpty && setDefaultValue) {
                                    sourceValue = column.defaultChecked ? customValue : sourceValue
                                }
                                checkboxValues[inputId] = (sourceValue === customValue)
                            } else {
                                if (sourceValueIsEmpty && setDefaultValue) {
                                    checkboxValues[inputId] = !!column.defaultChecked
                                } else {
                                    checkboxValues[inputId] = sourceValue
                                }
                            }

                        } else if (column.type === FormTypes.select) {
                            if (!sourceValueIsEmpty) {
                                // 判断是否是多选
                                if (typeof sourceValue === 'string' && (column.props || {})['mode'] === 'multiple') {
                                    sourceValue = sourceValue === '' ? [] : sourceValue.split(',')
                                }
                                selectValues[inputId] = sourceValue
                            } else {
                                selectValues[inputId] = undefined
                            }

                        } else if (column.type === FormTypes.date || column.type === FormTypes.datetime) {
                            jdateValues[inputId] = sourceValue

                        } else if (column.type === FormTypes.slot) {
                            slotValues[inputId] = sourceValue

                        } else if (column.type === FormTypes.popup) {
                            popupValues[inputId] = sourceValue
                        } else if (column.type === FormTypes.sel_depart) {
                            departCompValues[inputId] = sourceValue
                        } else if (column.type === FormTypes.sel_user) {
                            userCompValues[inputId] = sourceValue
                        } else if (column.type === FormTypes.input_pop) {
                            jInputPopValues[inputId] = sourceValue
                        } else if (column.type === FormTypes.radio) {
                            radioValues[inputId] = sourceValue
                        } else if (column.type === FormTypes.sel_search) {
                            searchSelectValues[inputId] = sourceValue
                        } else if (column.type === FormTypes.list_multi) {
                            if (typeof sourceValue === 'string' && sourceValue.length > 0) {
                                multiSelectValues[inputId] = sourceValue.split(',')
                            } else {
                                multiSelectValues[inputId] = []
                            }
                        } else if (column.type === FormTypes.upload || column.type === FormTypes.file || column.type === FormTypes.image) {
                            if (sourceValue) {
                                let fileName = ''
                                if (sourceValue.indexOf(',') > 0) {
                                    let sourceValue2 = sourceValue.split(',')[0]
                                    fileName = sourceValue2.substring(sourceValue2.lastIndexOf('/') + 1)
                                } else {
                                    fileName = sourceValue.substring(sourceValue.lastIndexOf('/') + 1)
                                }
                                uploadValues[inputId] = {
                                    name: fileName,
                                    status: 'done',
                                    path: sourceValue
                                }
                            }
                        } else {
                            value[column.key] = sourceValue
                        }

                        // 解析disabledRows
                        for (let columnKey in this.disabledRows) {
                            // 判断是否有该属性
                            if (this.disabledRows.hasOwnProperty(columnKey) && data.hasOwnProperty(columnKey)) {
                                if (disabled !== true) {
                                    let temp = this.disabledRows[columnKey]
                                    // 禁用规则可以是一个数组
                                    if (temp instanceof Array) {
                                        disabled = temp.includes(data[columnKey])
                                    } else {
                                        disabled = (temp === data[columnKey])
                                    }
                                    if (disabled) {
                                        disabledRowIds.push(row.id)
                                    }
                                }
                            }
                        }
                    })
                    // 插入行而不是添加到最后
                    let added = false
                    if (insertIndexes instanceof Array) {
                        let insertIndex = insertIndexes[newValueIndex]
                        if (typeof insertIndex === 'number') {
                            added = true
                            rows.splice(insertIndex, 0, row)
                            this.inputValues.splice(insertIndex, 0, value)
                        }
                    }
                    //update-begin-author:lvdandan date:20201105 for:LOWCOD-987 【online】js增强的问题--数据对象带有id，且和现有数据一致时，替换患有数据
                    if (-1 !== rows.findIndex(item => item.id === row.id)) {
                        added = true
                        this.inputValues = this.inputValues.map(item => item.id === row.id ? value : item)
                    }
                    //update-begin-author:lvdandan date:20201105 for:LOWCOD-987 【online】js增强的问题--数据对象带有id，且和现有数据一致时，替换患有数据
                    if (!added) {
                        rows.push(row)
                        this.inputValues.push(value)
                    }
                })
                // 启用了拖动排序，就重新计算排序编号
                if (this.dragSort) {
                    this.inputValues.forEach((item, index) => {
                        item[this.dragSortKey] = (index + 1)
                    })
                }
                this.disabledRowIds = disabledRowIds
                this.checkboxValues = checkboxValues
                this.selectValues = selectValues
                this.jdateValues = jdateValues
                this.departCompValues = departCompValues
                this.userCompValues = userCompValues
                this.jInputPopValues = jInputPopValues
                this.slotValues = slotValues
                this.uploadValues = uploadValues
                this.popupValues = popupValues
                this.radioValues = radioValues
                this.multiSelectValues = multiSelectValues
                this.searchSelectValues = searchSelectValues
                // 重新计算所有统计列
                this.recalcAllStatisticsColumns()
                // 更新到 dom
                if (update) {
                    this.rows = rows

                    // 更新form表单的值
                    this.$nextTick(() => {
                        this.forceUpdateFormValues()
                    })
                }
                return rows
            },

            /** 获取某一数字输入框列中的最大的值 */
            getInputNumberMaxValue(column) {
                let maxNum = 0
                this.inputValues.forEach((item, index) => {
                    let val = item[column.key], num
                    try {
                        num = parseInt(val)
                    } catch {
                        num = 0
                    }
                    // 把首次循环的结果当成最大值
                    if (index === 0) {
                        maxNum = num
                    } else {
                        maxNum = (num > maxNum) ? num : maxNum
                    }
                })
                return maxNum
            },
            /** 添加一行 */
            add(num = 1, forceScrollToBottom = false) {
                if (num < 1) return
                // let timestamp = new Date().getTime()
                let rows = this.rows
                let row
                for (let i = 0; i < num; i++) {
                    rows = this.push({}, false, rows)
                    row = rows[rows.length - 1]
                }
                this.rows = rows

                this.$nextTick(() => {
                    this.updateFormValues()
                })
                // 触发add事件
                this.$emit('added', {
                    row: (() => {
                        let r = Object.assign({}, row)
                        r.id = this.getCleanId(r.id)
                        return r
                    })(),
                    target: this
                })
                // 设置滚动条位置
                let tbody = this.getElement('tbody')
                let offsetHeight = tbody.offsetHeight
                let realScrollTop = tbody.scrollTop + offsetHeight
                if (forceScrollToBottom === false) {
                    // 只有滚动条在底部的时候才自动滚动
                    if (!((tbody.scrollHeight - realScrollTop) <= 10)) {
                        return
                    }
                }
                this.$nextTick(() => {
                    tbody.scrollTop = tbody.scrollHeight
                })
            },
            /**
             * 在指定位置添加一行
             * @param insertIndex 添加位置下标
             * @param num 添加的行数，默认1
             */
            insert(insertIndex, num = 1) {
                if (this.checkTooFastClick('insert', 1500)) {
                    return
                }
                if (!insertIndex && num < 1) return
                let rows = this.rows
                let newRows = []
                for (let i = 0; i < num; i++) {
                    let row = { id: this.generateId(rows) }
                    rows = this.push(row, false, rows, insertIndex)
                    newRows.push(row)
                }
                // 同步更改
                this.rows = rows
                this.$nextTick(() => {
                    this.recalcSortNumber()
                    this.forceUpdateFormValues()
                })
                // 触发 insert 事件
                this.$emit('inserted', {
                    rows: newRows.map(row => {
                        let r = cloneObject(row)
                        r.id = this.getCleanId(r.id)
                        return r
                    }),
                    num, insertIndex,
                    target: this
                })
            },
            /** 删除被选中的行 */
            removeSelectedRows() {
                this.removeRows(this.selectedRowIds)
                this.selectedRowIds = []
            },
            /** 删除一行或多行 */
            removeRows(id) {
                let ids = id
                if (!(id instanceof Array)) {
                    if (typeof id === 'string') {
                        ids = [id]
                    } else {
                        throw  `JEditableTable.removeRows() 函数需要的参数可以是string或Array类型，但提供的却是${typeof id}`
                    }
                }

                let rows = cloneObject(this.rows)
                ids.forEach(removeId => {
                    removeId = this.getCleanId(removeId)
                    // 找到每个id对应的真实index并删除
                    const findAndDelete = (arr) => {
                        for (let i = 0; i < arr.length; i++) {
                            let currentId = this.getCleanId(arr[i].id)
                            if (currentId === removeId) {
                                arr.splice(i, 1)
                                return true
                            }
                        }
                    }
                    // 找到rows对应的index，并删除
                    if (findAndDelete(rows)) {
                        // 找到values对应的index，并删除
                        findAndDelete(this.inputValues)
                        // 将caseId去除
                        let id = this.getCleanId(removeId)
                        this.deleteIds.push(id)
                    }
                })
                this.rows = rows
                this.$emit('deleted', this.getDeleteIds(), this)
                this.$nextTick(() => {
                    // 更新formValues
                    this.updateFormValues()
                    // 重新计算统计
                    this.recalcAllStatisticsColumns()
                })
                return true
            },

            /** 获取表格表单里的值（异步版） */
            getValuesAsync(options = {}, callback) {
                let { validate, rowIds, deleteTempId } = options
                if (typeof validate !== 'boolean') validate = true
                if (!(rowIds instanceof Array)) rowIds = null
                // 是否删除临时ID，默认为 false
                if (typeof deleteTempId !== 'boolean') deleteTempId = false
                // console.log('options:', { validate, rowIds })

                let asyncCount = 0
                let error = 0
                let inputValues = cloneObject(this.inputValues)
                let tooltips = Object.assign({}, this.tooltips)
                let notPassedIds = cloneObject(this.notPassedIds)
                // 用于存储合并后的值
                let values = []
                // 遍历inputValues来获取每行的值
                for (let value of inputValues) {
                    let rowIdsFlag = false
                    // 如果带有rowIds，那么就只存这几行的数据
                    if (rowIds == null) {
                        rowIdsFlag = true
                    } else {
                        for (let rowId of rowIds) {
                            if (this.getCleanId(rowId) === this.getCleanId(value.id)) {
                                rowIdsFlag = true
                                break
                            }
                        }
                    }

                    if (!rowIdsFlag) continue

                    this.columns.forEach(column => {
                        let inputId = column.key + value.id
                        if (column.type === FormTypes.checkbox) {
                            let checked = this.checkboxValues[inputId]
                            if (column.customValue instanceof Array) {
                                value[column.key] = checked ? column.customValue[0] : column.customValue[1]
                            } else {
                                value[column.key] = checked
                            }

                        } else if (column.type === FormTypes.select) {
                            let selected = this.selectValues[inputId]
                            if (selected instanceof Array) {
                                value[column.key] = cloneObject(selected)
                            } else {
                                value[column.key] = selected
                            }

                        } else if (column.type === FormTypes.date || column.type === FormTypes.datetime) {
                            value[column.key] = this.jdateValues[inputId]

                        } else if (column.type === FormTypes.sel_depart) {
                            value[column.key] = this.departCompValues[inputId]

                        } else if (column.type === FormTypes.sel_user) {
                            value[column.key] = this.userCompValues[inputId]

                        } else if (column.type === FormTypes.input_pop) {
                            value[column.key] = this.jInputPopValues[inputId]

                        } else if (column.type === FormTypes.upload) {
                            value[column.key] = cloneObject(this.uploadValues[inputId] || null)

                        } else if (column.type === FormTypes.image || column.type === FormTypes.file) {
                            let currUploadObj = cloneObject(this.uploadValues[inputId] || null)
                            if (currUploadObj) {
                                value[column.key] = currUploadObj['path'] || null
                            }

                        } else if (column.type === FormTypes.popup) {
                            if (!value[column.key]) {
                                value[column.key] = this.popupValues[inputId] || null
                            }
                        } else if (column.type === FormTypes.radio) {
                            value[column.key] = this.radioValues[inputId]
                        } else if (column.type === FormTypes.sel_search) {
                            value[column.key] = this.searchSelectValues[inputId]
                        } else if (column.type === FormTypes.list_multi) {
                            if (!this.multiSelectValues[inputId] || this.multiSelectValues[inputId].length === 0) {
                                value[column.key] = ''
                            } else {
                                value[column.key] = this.multiSelectValues[inputId].join(',')
                            }
                        } else if (column.type === FormTypes.slot) {
                            value[column.key] = this.slotValues[inputId]
                        }

                        // 检查表单验证
                        if (validate === true) {
                            const handleValidateOneInput = (results) => {
                                tooltips[inputId] = results[0]
                                if (tooltips[inputId].passed === false) {
                                    error++
                                    // if (error++ === 0) {
                                    // let element = document.getElementById(inputId)
                                    // while (element.className !== 'tr') {
                                    //   element = element.parentElement
                                    // }
                                    // this.jumpToId(inputId, element)
                                    // }
                                }
                                tooltips[inputId].visible = false
                                notPassedIds = results[1]
                            }
                            asyncCount++
                            let results = this.validateOneInputAsync(value[column.key], value, column, notPassedIds, false, 'getValues', (results) => {
                                handleValidateOneInput(results)
                                asyncCount--
                            })
                            handleValidateOneInput(results)
                        }
                    })
                    // 删除 tempId
                    if (deleteTempId && this.isTempId(value.id)) {
                        delete value.id
                    } else {
                        value.id = this.getCleanId(value.id)
                    }

                    values.push(value)
                }

                if (validate === true) {
                    this.tooltips = tooltips
                    this.notPassedIds = notPassedIds
                }

                const timer = setInterval(() => {
                    if (asyncCount === 0) {
                        clearInterval(timer)
                        if (typeof callback === 'function') {
                            callback({ error, values })
                        }
                    }
                }, 10)

                return { error, values }
            },

            /** 获取表格表单里的值（同步版） */
            getValuesSync(options = {}) {
                return this.getValuesAsync(options)
            },

            /** 获取表格表单里的值 */
            getValues(callback, validate = true, rowIds) {
                this.getValuesAsync({ validate, rowIds }, ({ error, values }) => {
                    if (typeof callback === 'function') {
                        callback(error, values)
                    }
                })
            },
            /** getValues的Promise版 */
            getValuesPromise(validate = true, rowIds, deleteTempId) {
                return new Promise((resolve, reject) => {
                    this.getValuesAsync({ validate, rowIds, deleteTempId }, ({ error, values }) => {
                        if (error === 0) {
                            resolve(values)
                        } else {
                            reject(VALIDATE_NO_PASSED)
                        }
                    })
                })
            },
            /** 获取被删除项的id */
            getDeleteIds() {
                return cloneObject(this.deleteIds)
            },
            /** 获取所有的数据，包括values、deleteIds */
            getAll(validate, deleteTempId) {
                return new Promise((resolve, reject) => {
                    let deleteIds = this.getDeleteIds()
                    this.getValuesPromise(validate, null, deleteTempId).then((values) => {
                        resolve({ values, deleteIds })
                    }).catch(error => {
                        reject(error)
                    })
                })
            },
            /** Sync 获取所有的数据，包括values、deleteIds */
            getAllSync(validate, rowIds, deleteTempId) {
                let result = this.getValuesSync({ validate, rowIds, deleteTempId })
                result.deleteIds = this.getDeleteIds()
                return result
            },
            // slot 获取值
            _getValueForSlot(rowId) {
                return this.getValuesSync({ rowIds: [rowId] }).values[0]
            },
            _getAllValuesForSlot() {
                return cloneObject({
                    inputValues: this.inputValues,
                    selectValues: this.selectValues,
                    checkboxValues: this.checkboxValues,
                    jdateValues: this.jdateValues,
                    departCompValues: this.departCompValues,
                    userCompValues: this.userCompValues,
                    jInputPopValues: this.jInputPopValues,
                    slotValues: this.slotValues,
                    uploadValues: this.uploadValues,
                    popupValues: this.popupValues,
                    radioValues: this.radioValues,
                    multiSelectValues: this.multiSelectValues,
                    searchSelectValues: this.searchSelectValues
                })
            },
            /** 设置某行某列的值 */
            setValues(values) {

                values.forEach(item => {
                    let { rowKey, values: newValues } = item
                    rowKey = this.getCleanId(rowKey)
                    for (let newValueKey in newValues) {
                        if (newValues.hasOwnProperty(newValueKey)) {
                            let edited = false // 已被修改
                            for (let column of this.columns) {
                                if (column.key === newValueKey) {
                                    let newValue = newValues[newValueKey]
                                    this.inputValues.forEach(value => {
                                        // 在inputValues中找到了该字段
                                        if (rowKey === this.getCleanId(value.id)) {
                                            if (value.hasOwnProperty(newValueKey)) {
                                                edited = true
                                                value[newValueKey] = newValue
                                            }
                                        }
                                    })
                                    if (!edited) {
                                        let modelKey = `${newValueKey}${this.caseId}${rowKey}`
                                        if (column.type === FormTypes.select) {
                                            if (newValue !== 0 && !newValue) {
                                                edited = this.setOneValue(this.selectValues, modelKey, undefined)
                                            } else {
                                                edited = this.setOneValue(this.selectValues, modelKey, newValue)
                                            }
                                        } else if (column.type === FormTypes.checkbox) {
                                            // checkbox 特殊处理 CustomValue
                                            let key = this.valuesHasOwnProperty(this.checkboxValues, modelKey)
                                            // 找到对应的column
                                            let sourceValue
                                            // 判断是否设定了customValue（自定义值）
                                            if (column.customValue instanceof Array) {
                                                let customValue = (column.customValue[0] || '').toString()
                                                sourceValue = (newValue === customValue)
                                            } else {
                                                sourceValue = !!newValue
                                            }
                                            this.$set(this.checkboxValues, key, sourceValue)
                                            edited = true
                                        } else if (column.type === FormTypes.date || column.type === FormTypes.datetime) {
                                            edited = this.setOneValue(this.jdateValues, modelKey, newValue)
                                        } else if (column.type === FormTypes.sel_depart) {
                                            edited = this.setOneValue(this.departCompValues, modelKey, newValue)
                                        } else if (column.type === FormTypes.sel_user) {
                                            edited = this.setOneValue(this.userCompValues, modelKey, newValue)
                                        } else if (column.type === FormTypes.input_pop) {
                                            edited = this.setOneValue(this.jInputPopValues, modelKey, newValue)
                                        } else if (column.type === FormTypes.slot) {
                                            edited = this.setOneValue(this.slotValues, modelKey, newValue)
                                        } else if (column.type === FormTypes.upload || column.type === FormTypes.image || column.type === FormTypes.file) {
                                            edited = this.setOneValue(this.uploadValues, modelKey, newValue)
                                        } else if (column.type === FormTypes.popup) {
                                            edited = this.setOneValue(this.popupValues, modelKey, newValue)
                                        } else if (column.type === FormTypes.radio) {
                                            edited = this.setOneValue(this.radioValues, modelKey, newValue)
                                        } else if (column.type === FormTypes.list_multi) {
                                            edited = this.setOneValue(this.multiSelectValues, modelKey, newValue, true)
                                        } else if (column.type === FormTypes.sel_search) {
                                            edited = this.setOneValue(this.searchSelectValues, modelKey, newValue)
                                        } else {
                                            edited = false
                                        }
                                    }
                                    if (edited) {
                                        this.elemValueChange(column.type, { [newValueKey]: newValue }, column, newValue)
                                    }
                                }
                            }
                            if (!edited) {
                                console.warn(`JEditableTable.setValues：没有找到"${newValueKey}"列`)
                            }
                        }
                    }
                })
                // 强制更新formValues
                this.forceUpdateFormValues()
            },
            /**
             * 设置单个组件的值
             * @param valuesObject 组件存储值的对象
             * @param modelKey 组件存储值的对象里的key
             * @param value 新值
             * @param isMultiple 是否多选，如果是就会对 value 进行一个 split(',') 的操作
             */
            setOneValue(valuesObject, modelKey, value, isMultiple = false) {
                let key = this.valuesHasOwnProperty(valuesObject, modelKey)
                if (key) {
                    // 处理多选数组
                    if (isMultiple && !Array.isArray(value)) {
                        value = (value || '').toString().trim()
                        value = value === '' ? [] : value.split(',')
                    }
                    this.$set(valuesObject, key, value)
                    return true
                }
                return false
            },
            valuesHasOwnProperty(values, ownProperty) {
                let key = ownProperty
                if (values.hasOwnProperty(key)) {
                    return key
                }
                if (values.hasOwnProperty(key + this.tempId)) {
                    return key + this.tempId
                }
                return null
            },

            /** 跳转到指定位置 */
            // jumpToId(id, element) {
            //   if (element == null) {
            //     element = document.getElementById(id)
            //   }
            //   if (element != null) {
            //     console.log(this.getElement('tbody').scrollTop, element.offsetTop)
            //     this.getElement('tbody').scrollTop = element.offsetTop
            //     console.log(this.getElement('tbody').scrollTop, element.offsetTop)
            //   }
            // },

            /**
             * 验证单个表单，异步版
             *
             * @param value 校验的值
             * @param row 校验的行
             * @param column 校验的列
             * @param notPassedIds 没有通过校验的 id
             * @param update 是否更新到vue中
             * @param validType 校验触发的方式（input、blur等）
             * @param callback
             */
            validateOneInputAsync(value, row, column, notPassedIds, update = false, validType = 'input', callback) {
                let tooltips = Object.assign({}, this.tooltips)
                // let notPassedIds = cloneObject(this.notPassedIds)
                let inputId = column.key + row.id
                tooltips[inputId] = tooltips[inputId] ? tooltips[inputId] : {}

                let [passed, message] = this.validateValue(column, value)

                const nextThen = res => {
                    let [passed, message] = res
                    // !(passed == null && tooltips[inputId].visible != null)
                    if (passed != null) {
                        tooltips[inputId].visible = !passed
                        tooltips[inputId].passed = passed
                        let index = notPassedIds.indexOf(inputId)
                        if (!passed) {
                            tooltips[inputId].title = this.replaceProps(column, message)
                            if (index === -1) notPassedIds.push(inputId)
                        } else {
                            if (index !== -1) notPassedIds.splice(index, 1)
                        }
                    }
                    // 是否更新到data
                    if (update) {
                        this.tooltips = tooltips
                        this.notPassedIds = notPassedIds
                    }

                    if (typeof callback === 'function') {
                        callback([tooltips[inputId], notPassedIds])
                    }

                }

                if (typeof passed === 'function') {
                    let executed = false
                    passed(validType, value, { id: this.getCleanId(row.id) }, { ...column }, (flag, msg) => {
                        if (executed) return
                        executed = true
                        if (typeof msg === 'string') {
                            message = msg
                        }
                        if (flag == null) {
                            nextThen([true, message])
                        } else {
                            nextThen([!!flag, message])
                        }
                    }, this)
                } else {
                    nextThen([passed, message])
                }

                return [tooltips[inputId], notPassedIds]
            },

            /** 验证单个表单 */
            validateOneInput(value, row, column, notPassedIds, update = false, validType = 'input') {
                return this.validateOneInputAsync(value, row, column, notPassedIds, update, validType)
            },
            /** 通过规则验证值是否正确 */
            validateValue(column, value) {
                let rules = column.validateRules
                let passed = true, message = ''
                // 判断有没有验证规则或验证规则格式正不正确，若条件不符合则默认通过
                if (rules instanceof Array) {
                    for (let rule of rules) {
                        // 当前值是否为空
                        let isNull = (value == null || value === '')
                        // 验证规则：非空
                        if (rule.required === true && isNull) {
                            passed = false
                        } else // 使用 else-if 是为了防止一个 rule 中出现两个规则
                            // 验证规则：唯一校验
                        if (rule.unique === true || rule.pattern === 'only') {
                            let { values } = this.getValuesSync({ validate: false })
                            let findCount = 0
                            for (let val of values) {
                                if (val[column.key] === value) {
                                    if (++findCount >= 2) {
                                        passed = false
                                        break
                                    }
                                }
                            }
                        } else
                            // 验证规则：正则表达式
                        if (!!rule.pattern && !isNull) {

                            // 兼容 online 的规则
                            let foo = [
                                { title: '6到16位数字', value: 'n6-16', pattern: /^\d{6,16}$/ },
                                { title: '6到16位任意字符', value: '*6-16', pattern: /^.{6,16}$/ },
                                { title: '6到18位字母', value: 's6-18', pattern: /^[a-z|A-Z]{6,18}$/ },
                                {
                                    title: '网址',
                                    value: 'url',
                                    pattern: /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/
                                },
                                { title: '电子邮件', value: 'e', pattern: /^([\w]+\.*)([\w]+)@[\w]+\.\w{3}(\.\w{2}|)$/ },
                                { title: '手机号码', value: 'm', pattern: /^1[3456789]\d{9}$/ },
                                { title: '邮政编码', value: 'p', pattern: /^[1-9]\d{5}$/ },
                                { title: '字母', value: 's', pattern: /^[A-Z|a-z]+$/ },
                                { title: '数字', value: 'n', pattern: /^-?\d+(\.?\d+|\d?)$/ },
                                { title: '整数', value: 'z', pattern: /^-?\d+$/ },
                                { title: '非空', value: '*', pattern: /^.+$/ },
                                {
                                    title: '金额',
                                    value: 'money',
                                    pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/
                                }
                            ]
                            let flag = false
                            for (let item of foo) {
                                if (rule.pattern === item.value && item.pattern) {
                                    passed = new RegExp(item.pattern).test(value)
                                    flag = true
                                    break
                                }
                            }
                            if (!flag) passed = new RegExp(rule.pattern).test(value)
                        } else
                            // 校验规则：自定义函数校验
                        if (typeof rule.handler === 'function') {
                            return [rule.handler, rule.message]
                        }
                        // 如果没有通过验证，则跳出循环。如果通过了验证，则继续验证下一条规则
                        if (!passed) {
                            message = rule.message
                            break
                        }
                    }
                }
                return [passed, message]
            },

            /** 动态更新表单的值 */
            updateFormValues() {
                let trs = this.getElement('tbody').getElementsByClassName('tr')
                let trEls = []
                for (let tr of trs) {
                    trEls.push(tr)
                }
                // 获取新增的 tr
                let newTrEls = trEls
                if (this.visibleTrEls.length > 0) {
                    newTrEls = []
                    for (let tr of trEls) {
                        let isNewest = true
                        for (let vtr of this.visibleTrEls) {
                            if (vtr.id === tr.id) {
                                isNewest = false
                                break
                            }
                        }
                        if (isNewest) {
                            newTrEls.push(tr)
                        }
                    }
                }
                this.visibleTrEls = trEls
                // 向新增的tr中赋值
                newTrEls.forEach(tr => {
                    let { idx } = tr.dataset
                    let value = this.inputValues[idx]
                    for (let key in value) {
                        if (value.hasOwnProperty(key)) {
                            let elid = `${key}${value.id}`
                            let el = document.getElementById(elid)
                            if (el) {
                                el.value = value[key]
                            }
                        }
                    }
                })
            },
            /** 强制更新FormValues */
            forceUpdateFormValues() {
                this.visibleTrEls = []
                this.$forceUpdate()
                this.$nextTick(() => this.updateFormValues())
            },

            // 重新计算所有统计列
            recalcAllStatisticsColumns() {
                if (this.hasStatisticsColumn) {
                    Object.keys(this.statisticsColumns).forEach(key => this.recalcOneStatisticsColumn(key))
                }
            },
            // 重新计算单个统计列
            recalcOneStatisticsColumn(key) {
                if (this.hasStatisticsColumn) {
                    if (this.statisticsColumns.hasOwnProperty(key)) {
                        // 计算合计值
                        let count = 0
                        this.inputValues.forEach(item => {
                            let value = item[key]
                            if (value && count !== '-') {
                                try {
                                    count += Number.parseInt(value)
                                } catch (e) {
                                    count = '-'
                                }
                            }
                        })
                        this.statisticsColumns[key] = count
                    }
                }
            },

            /** 获取某个统计字段的值 */
            getStatisticsValue(key) {
                if (this.hasStatisticsColumn) {
                    if (this.statisticsColumns.hasOwnProperty(key)) {
                        return this.statisticsColumns[key]
                    }
                }
                return null
            },

            /** 全选或取消全选 */
            handleChangeCheckedAll() {
                let selectedRowIds = []
                if (!this.getSelectAll) {
                    this.rows.forEach(row => {
                        if ((this.disabledRowIds || []).indexOf(row.id) === -1) {
                            selectedRowIds.push(row.id)
                        }
                    })
                }
                this.selectedRowIds = selectedRowIds
            },
            /** 左侧行选择框change事件 */
            handleChangeLeftCheckbox(event) {
                let { id } = event.target

                if ((this.disabledRowIds || []).indexOf(id) !== -1) {
                    return
                }

                let index = this.selectedRowIds.indexOf(id)
                if (index !== -1) {
                    this.selectedRowIds.splice(index, 1)
                } else {
                    this.selectedRowIds.push(id)
                }

            },
            handleClickAdd() {
                this.add()
            },
            handleConfirmDelete() {
                this.removeSelectedRows()
            },
            handleClickClearSelection() {
                this.clearSelection()
            },
            clearSelection() {
                this.selectedRowIds = []
            },
            /** 用于搜索下拉框中的内容 */
            handleSelectFilterOption(input, option, column) {
                if (column.allowSearch === true || column.allowInput === true) {
                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
                return true
            },
            /** select 搜索时的事件，用于动态添加options */
            handleSearchSelect(value, id, row, col) {
                if (col.allowSearch !== true && col.allowInput === true) {
                    // 是否找到了对应的项，找不到则添加这一项
                    let flag = false
                    for (let option of col.options) {
                        if (option.value.toLocaleString() === value.toLocaleString()) {
                            flag = true
                            break
                        }
                    }
                    // !!value ：不添加空值
                    if (!flag && !!value) {
                        // searchAdd 是否是通过搜索添加的
                        col.options.push({ title: value, value: value, searchAdd: true })
                    }

                }
            },
            // blur 失去焦点
            handleBlurSearch(value, id, row, col) {
                if (col.allowInput === true) {
                    // 删除无用的因搜索（用户输入）而创建的项
                    if (typeof value === 'string') {
                        let indexs = []
                        col.options.forEach((option, index) => {
                            if (option.value.toLocaleString() === value.toLocaleString()) {
                                delete option.searchAdd
                            } else if (option.searchAdd === true) {
                                indexs.push(index)
                            }
                        })
                        // 翻转删除数组中的项
                        for (let index of indexs.reverse()) {
                            col.options.splice(index, 1)
                        }
                    }

                }
                // 做单个表单验证
                this.validateOneInput(value, row, col, this.notPassedIds, true, 'blur')
            },

            /** 触发已拖动事件 */
            emitDragged(oldIndex, newIndex) {
                this.$emit('dragged', { oldIndex, newIndex, target: this })
            },

            handleDragMoveStart(event) {
                this.dragging = true
                this.$refs.scrollView.style.overflow = 'hidden'
            },

            /** 拖动结束，交换inputValue中的值 */
            handleDragMoveEnd(event) {
                this.dragging = false
                this.$refs.scrollView.style.overflow = 'auto'

                let { oldIndex, newIndex, item: { dataset: { idx: dataIdx } } } = event

                // 由于动态显示隐藏行导致index有误差，需要算出真实的index
                let diff = Number.parseInt(dataIdx) - oldIndex
                oldIndex += diff
                newIndex += diff

                this.rowResort(oldIndex, newIndex)
                this.emitDragged(oldIndex, newIndex)
            },

            /** 行重新排序 */
            rowResort(oldIndex, newIndex) {
                const sort = (array) => {
                    // 存储旧数据，并删除旧项目
                    let temp = array[oldIndex]
                    array.splice(oldIndex, 1)
                    // 向新项目里添加旧数据
                    array.splice(newIndex, 0, temp)
                }

                sort(this.rows)
                sort(this.inputValues)

                this.recalcSortNumber()

                this.forceUpdateFormValues()
            },

            /** 重新计算排序字段的数值 */
            recalcSortNumber() {
                if (this.dragSort) {
                    // 重置排序字段
                    this.inputValues.forEach((val, idx) => val[this.dragSortKey] = (idx + 1))
                }
            },

            /** 当前行向上移一位 */
            _handleRowMoveUp(rowIndex) {
                if (rowIndex > 0) {
                    let newIndex = rowIndex - 1
                    this.rowResort(rowIndex, newIndex)
                    this.emitDragged(rowIndex, newIndex)
                }
            },

            /** 当前行向下移一位 */
            _handleRowMoveDown(rowIndex) {
                if (rowIndex < (this.rows.length - 1)) {
                    let newIndex = rowIndex + 1
                    this.rowResort(rowIndex, newIndex)
                    this.emitDragged(rowIndex, newIndex)
                }
            },

            /** 在当前行下面插入一行 */
            _handleRowInsertDown(rowIndex) {
                let insertIndex = (rowIndex + 1)
                this.insert(insertIndex)
            },

            /* --- Jane function begin --- */

            /** input事件 */
            handleInputCommono(target, index, row, column) {
                let oldValue = this.inputValues[index][column.key] || ''
                let { value, dataset, selectionStart } = target
                let type = FormTypes.input
                let change = true
                if (`${dataset.inputNumber}` === 'true') {
                    type = FormTypes.inputNumber
                    // 判断输入的值是否匹配数字正则表达式，不匹配就还原
                    if (!/^-?\d+\.?\d*$/.test(value) && (value !== '' && value !== '-')) {
                        change = false
                        value = oldValue
                        target.value = value
                        if (typeof selectionStart === 'number') {
                            target.selectionStart = selectionStart - 1
                            target.selectionEnd = selectionStart - 1
                        }
                    }
                }
                // 存储输入的值
                this.inputValues[index][column.key] = value
                // 做单个表单验证
                this.validateOneInput(value, row, column, this.notPassedIds, true, 'input')

                if (type === FormTypes.inputNumber) {
                    this.recalcOneStatisticsColumn(column.key)
                }

                // 触发valueChange 事件
                if (change) {
                    this.elemValueChange(type, row, column, value)
                }
            },
            /** slot Change */
            handleChangeSlotCommon(value, id, row, column) {
                this.slotValues = this.bindValuesChange(value, id, 'slotValues')
                // 做单个表单验证
                this.validateOneInput(value, row, column, this.notPassedIds, true, 'change')
                // 触发valueChange 事件
                this.elemValueChange(FormTypes.slot, row, column, value)
            },
            handleBlurCommono(target, index, row, column) {
                let { value, dataset } = target
                if (dataset && `${dataset.inputNumber}` === 'true') {
                    // 判断输入的值是否匹配数字正则表达式，不匹配就置空
                    if (!/^-?\d+\.?\d*$/.test(value)) {
                        value = ''
                    } else {
                        value = Number.parseFloat(value)
                    }
                    target.value = value
                }
                //update--begin--autor:lvdandan-----date:20201126------for：LOWCOD-1088 JEditableTable输入校验提示框位置偏移 #2005
                setTimeout(() => {
                    // 做单个表单验证
                    this.validateOneInput(value, row, column, this.notPassedIds, true, 'blur')
                }, 100)
                //update--end--autor:lvdandan-----date:20201126------for：LOWCOD-1088 JEditableTable输入校验提示框位置偏移 #2005
            },
            handleChangeCheckboxCommon(event, row, column) {
                let { id, checked } = event.target
                this.checkboxValues = this.bindValuesChange(checked, id, 'checkboxValues')

                // 触发valueChange 事件
                this.elemValueChange(FormTypes.checkbox, row, column, checked)
            },
            handleChangeSelectCommon(value, id, row, column) {
                this.selectValues = this.bindValuesChange(value, id, 'selectValues')
                // 做单个表单验证
                this.validateOneInput(value, row, column, this.notPassedIds, true, 'change')

                // 触发valueChange 事件
                this.elemValueChange(FormTypes.select, row, column, value)
            },
            handleChangeJDateCommon(value, id, row, column, showTime) {
                this.jdateValues = this.bindValuesChange(value, id, 'jdateValues')
                this.validateOneInput(value, row, column, this.notPassedIds, true, 'change')

                // 触发valueChange 事件
                if (showTime) {
                    this.elemValueChange(FormTypes.datetime, row, column, value)
                } else {
                    this.elemValueChange(FormTypes.date, row, column, value)
                }
            },
            //部门组件值改变
            handleChangeDepartCommon(value, id, row, column) {
                this.departCompValues = this.bindValuesChange(value, id, 'departCompValues')
                this.validateOneInput(value, row, column, this.notPassedIds, true, 'change')
                // 触发valueChange 事件
                this.elemValueChange(FormTypes.sel_depart, row, column, value)
            },
            //用户组件值改变
            handleChangeUserCommon(value, id, row, column) {
                this.userCompValues = this.bindValuesChange(value, id, 'userCompValues')
                this.validateOneInput(value, row, column, this.notPassedIds, true, 'change')
                // 触发valueChange 事件
                this.elemValueChange(FormTypes.sel_user, row, column, value)
            },
            handleChangeJInputPopCommon(value, id, row, column) {
                this.jInputPopValues = this.bindValuesChange(value, id, 'jInputPopValues')
                // 做单个表单验证
                this.validateOneInput(value, row, column, this.notPassedIds, true, 'change')
                // 触发valueChange 事件
                this.elemValueChange(FormTypes.input_pop, row, column, value)
            },
            handleChangeUpload(info, id, row, column) {
                let { file } = info
                let value = {
                    name: file.name,
                    type: file.type,
                    size: file.size,
                    status: file.status,
                    percent: file.percent
                }
                if (column.responseName && file.response) {
                    value['responseName'] = file.response[column.responseName]
                }
                if (file.status === 'done') {
                    value['path'] = file.response[column.responseName]
                } else if (file.status === 'error') {
                    value['message'] = file.response.message || '未知错误'
                }
                this.uploadValues = this.bindValuesChange(value, id, 'uploadValues')

                // 触发valueChange 事件
                this.elemValueChange(column.type, row, column, value)
            },
            handleMoreOperation(id, flag, column) {
                //update-begin-author:wangshuai date:20201021 for:LOWCOD-969 判断传过来的字段是否存在number，用于控制上传文件
                if (column.number) {
                    this.number = column.number
                } else {
                    this.number = 0
                }
                //update-end-author:wangshuai date:20201021 for:LOWCOD-969 判断传过来的字段是否存在number，用于控制上传文件
                if (column && column.fieldExtendJson) {
                    let json = JSON.parse(column.fieldExtendJson)
                    this.number = json.uploadnum ? json.uploadnum : 0
                }
                //console.log("this.uploadValues[id]",this.uploadValues[id])
                let path = ''
                if (this.uploadValues && this.uploadValues[id]) {
                    path = this.uploadValues[id].path
                }
                this.$refs.filePop.show(id, path, flag)
            },
            handleFileSuccess(obj) {
                if (obj.id) {
                    this.uploadValues = this.bindValuesChange(obj, obj.id, 'uploadValues')
                }
            },
            handleClickTableRow(event) {
                let { target } = event
                if (target.className === 'td' || target.className === 'tr') {
                    // 清空编辑状态
                    this.currentEditRows = {}
                }
            },
            // 点击后编辑当前行
            handleEditRow(row, col) {
                if (this.alwaysEdit) {
                    return
                }
                // 将点击的组件置为可编辑并还原其他组件的编辑状态
                this.currentEditRows = {
                    [row.id]: {
                        [col.key]: true
                    }
                }
                if (col.type === FormTypes.input || col.type === FormTypes.inputNumber) {
                    this.$nextTick(() => {
                        this.forceUpdateFormValues()
                        // 自动获取焦点
                        let el = document.getElementById(`${col.key}${row.id}`)
                        if (el) {
                            el.focus()
                        }
                    })
                }
            },
            /** 记录用到数据绑定的组件的值 */
            bindValuesChange(value, id, key) {
                this.$set(this[key], id, value)
                return this[key]
            },

            /** value 触发valueChange事件 */
            elemValueChange(type, rowSource, columnSource, value) {
                let column = Object.assign({}, columnSource)
                // 将caseId去除
                let row = Object.assign({}, rowSource)
                row.id = this.getCleanId(row.id)
                // 获取整行的数据
                let { values } = this.getValuesSync({ validate: false, rowIds: [row.id] })
                if (values.length > 0) {
                    Object.assign(row, values[0])
                }
                this.$emit('valueChange', { type, row, column, value, target: this })
            },

            /** 获取干净的ID（不包含任何杂质的ID） */
            getCleanId(id) {
                id = this.removeCaseId(id)
                id = this.removeTempId(id)
                return id
            },

            /** 判断某个ID是否包含了caseId */
            hasCaseId(id) {
                return id && id.startsWith(this.caseId)
            },

            /** 将caseId去除 */
            removeCaseId(id) {
                if (this.hasCaseId(id)) {
                    return id.substring(this.caseId.length, id.length)
                }
                return id
            },

            // 判断 id 是否是临时Id
            isTempId(id) {
                return (id || '').endsWith(this.tempId)
            },

            /** 将tempId去除 */
            removeTempId(id) {
                if (this.isTempId(id)) {
                    return id.substring(0, id.length - this.tempId.length)
                }
                return id
            },

            handleClickDelFile(id) {
                this.uploadValues[id] = null
            },
            handleClickDownloadFile(id) {
                let { path } = this.uploadValues[id] || {}
                if (path) {
                    let url = getFileAccessHttpUrl(path)
                    window.open(url)
                }
            },
            handleClickDownFileByUrl(id) {
                let { url, path } = this.uploadValues[id] || {}
                if (!url || url.length === 0) {
                    if (path && path.length > 0) {
                        url = getFileAccessHttpUrl(path.split(',')[0])
                    }
                }
                if (url) {
                    window.open(url)
                }
            },
            handleClickShowImageError(id) {
                let currUploadObj = this.uploadValues[id] || null
                if (currUploadObj && currUploadObj['message']) {
                    this.$error({ title: '上传出错', content: '错误信息：' + currUploadObj['message'], maskClosable: true })
                }
            },

            /** 加载数据字典并合并到 options */
            _loadDictConcatToOptions(column) {
                initDictOptions(column.dictCode).then((res) => {
                    if (res.success) {
                        let newOptions = (column.options || [])// .concat(res.result)
                        res.result.forEach(item => {
                            // 过滤重复数据
                            for (let option of newOptions) if (option.value === item.value) return
                            newOptions.push(item)
                        })
                        this.$set(column, 'options', newOptions)
                    } else {
                        console.group(`JEditableTable 查询字典(${column.dictCode})发生异常`)
                        console.log(res.message)
                        console.groupEnd()
                    }
                })
            },

            /* --- Jane function end --- */

            /* --- 以下是辅助方法，多用于动态构造页面中的数据 --- */

            /** 辅助方法：打印日志 */
            log() {
                if (this.$attrs.logger) {
                    console.log.apply(null, arguments)
                }
            },

            getVM() {
                return this
            },

            /** 辅助方法：动态构造Tooltip的Props，防止出现不消失的情况 */
            buildTooltipProps(row, col, id) {
                let { notPassedIds, tooltips } = this
                let props = {
                    title: (tooltips[id] || {}).title,
                    placement: 'top',
                    autoAdjustOverflow: true,
                    getPopupContainer: this.getParentContainer,
                    class: {
                        'j-check-failed': false
                    }
                }
                let isCheckFailed = notPassedIds.includes(id)
                if (isCheckFailed) {
                    props.class['j-check-failed'] = true
                } else {
                    props['visible'] = false
                }
                return props
            },

            /** 辅助方法：指定a-select 和 j-data 的父容器 */
            getParentContainer(node) {
                let element = (() => {
                    // nodeType 8	: Comment	: 注释
                    if (this.$el && this.$el.nodeType !== 8) {
                        return this.$el
                    }
                    let doc = document.getElementById(this.caseId + 'inputTable')
                    if (doc != null) {
                        return doc
                    }
                    return node.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
                })()

                // 递归判断是否带有 overflow: hidden；的父元素
                const ifParent = (child) => {
                    let currentOverflow = null
                    if (child['currentStyle']) {
                        currentOverflow = child['currentStyle']['overflow']
                    } else if (window.getComputedStyle) {
                        currentOverflow = window.getComputedStyle(child)['overflow']
                    }
                    if (currentOverflow != null) {
                        if (currentOverflow === 'hidden') {
                            // 找到了带有 hidden 的标签，判断它的父级是否还有 hidden，直到遇到完全没有 hidden 或 body 的时候才停止递归
                            let temp = ifParent(child.parentNode)
                            return temp != null ? temp : child.parentNode
                        } else
                            // 当前标签没有 hidden ，如果有父级并且父级不是 body 的话就继续递归判断父级
                        if (child.parentNode && child.parentNode.tagName.toLocaleLowerCase() !== 'body') {
                            return ifParent(child.parentNode)
                        } else {
                            // 直到 body 都没有遇到有 hidden 的标签
                            return null
                        }
                    } else {
                        return child
                    }
                }

                let temp = ifParent(element)
                return (temp != null) ? temp : element
            },

            /** 辅助方法：替换${...}变量 */
            replaceProps(col, value) {
                if (value && typeof value === 'string') {
                    value = value.replace(/\${title}/g, col.title)
                    value = value.replace(/\${key}/g, col.key)
                    value = value.replace(/\${defaultValue}/g, col.defaultValue)
                }
                return value
            },

            /** view辅助方法：构建 tr style */
            buildTrStyle(index) {
                return {
                    'top': `${rowHeight * index}px`
                }
            },
            /** view辅助方法：构建 td style */
            buildTdStyle(col) {
                const isEmptyWidth = (column) => (column.type === FormTypes.hidden || column.width === '0px' || column.width === '0' || column.width === 0)

                let style = {}
                // 计算宽度
                if (col.width) {
                    style['width'] = col.width
                } else if (this.columns) {
                    style['width'] = `${(100 - 4 * 2) / (this.columns.filter(column => !isEmptyWidth(column))).length}%`
                } else {
                    style['width'] = '120px'
                }
                //update-begin-author:lvdandan date:20201116 for:LOWCOD-984 默认风格功能测试附表样式问题 日期时间控件长度太大
                //如果是时间控件设为200px
                if (col.type === FormTypes.datetime) {
                    style['width'] = '200px'
                }
                if (col.type === FormTypes.sel_user && !col.width) {
                    style['width'] = '220px'
                }
                if (col.type === FormTypes.sel_depart && !col.width) {
                    style['width'] = '160px'
                }
                //update-end-author:lvdandan date:20201116 for:LOWCOD-984 默认风格功能测试附表样式问题 日期时间控件长度太大

                // checkbox 居中显示
                let isCheckbox = col.type === FormTypes.checkbox
                if (isCheckbox) {
                    style['align-items'] = 'center'
                    style['text-align'] = 'center'
                    style['padding-left'] = '0'
                    style['padding-right'] = '0'
                }
                if (isEmptyWidth(col)) {
                    style['padding-left'] = '0'
                    style['padding-right'] = '0'
                }
                return style
            },
            /** view辅助方法：构造props */
            buildProps(row, col) {
                let props = {}
                // 解析props
                if (typeof col.props === 'object') {
                    for (let prop in col.props) {
                        if (col.props.hasOwnProperty(prop)) {
                            props[prop] = this.replaceProps(col, col.props[prop])
                        }
                    }
                }
                // 判断select是否允许输入
                if (col.type === FormTypes.select && (col.allowInput === true || col.allowSearch === true)) {
                    props['showSearch'] = true
                }

                // 判断是否是禁用的列
                props['disabled'] = (typeof col['disabled'] === 'boolean' ? col['disabled'] : props['disabled'])

                // 判断是否为禁用的行
                if (props['disabled'] !== true) {
                    props['disabled'] = ((this.disabledRowIds || []).indexOf(row.id) !== -1)
                }

                // 判断是否禁用全部组件
                if (this.disabled === true) {
                    props['disabled'] = true
                }

                return props
            },

            /** 辅助方法：防止过快点击，如果点击过快的话就返回 true */
            checkTooFastClick(key = 'default', ms = 300) {
                let nowTime = Date.now()
                let lastTime = this.lastPushTimeMap.get(key)
                if (!lastTime) {
                    lastTime = nowTime
                    this.lastPushTimeMap.set(key, nowTime)
                    return false
                }
                let diffTime = nowTime - lastTime
                if (diffTime <= ms) {
                    this.$message.warn('你点击的太快了，请慢点点击!')
                    return true
                }
                this.lastPushTimeMap.set(key, nowTime)
                return false
            },

            /** upload 辅助方法：获取 headers */
            uploadGetHeaders(row, column) {
                let headers = {}
                if (column.token === true) {
                    headers['X-Access-Token'] = this.accessToken
                }
                return headers
            },
            /** 上传请求地址 */
            getUploadAction(value) {
                if (!value) {
                    return window._CONFIG['domianURL'] + '/sys/common/upload'
                } else {
                    return value
                }
            },
            /** 预览图片地址 */
            getCellImageView(id) {
                let currUploadObj = this.uploadValues[id] || null
                if (currUploadObj) {
                    if (currUploadObj['url']) {
                        return currUploadObj['url']
                    } else if (currUploadObj['path']) {
                        let readpath = currUploadObj['path'].split(',')[0]
                        return getFileAccessHttpUrl(readpath)
                    }
                }
                return ''
            },
            /** popup回调 */
            popupCallback(value, others, id, row, column, index) {
                // 存储输入的值
                let popupValue = value
                if (others) {
                    let rowKey = this.getCleanId(row.id)
                    let setValueItem = { rowKey, values: {} }
                    Object.keys(others).forEach(key => {
                        // 当前列直接赋值，其他列通过setValues赋值
                        if (key === column.key) {
                            popupValue = others[key]
                        } else {
                            setValueItem.values[key] = others[key]
                        }
                    })
                    if (Object.keys(setValueItem).length > 0) {
                        this.setValues([setValueItem])
                    }
                }
                this.setOneValue(this.popupValues, id, popupValue)
                // 做单个表单验证
                this.validateOneInput(value, row, column, this.notPassedIds, true, 'change')
                // 触发valueChange 事件
                this.elemValueChange('input', row, column, value)
            },
            /** popup输入框回显 */
            getPopupValue(id) {
                return this.popupValues[id]
            },
            handleRadioChange(value, id, row, column) {
                this.radioValues = this.bindValuesChange(value, id, 'radioValues')
                // 做单个表单验证
                this.validateOneInput(value, row, column, this.notPassedIds, true, 'change')
                // 触发valueChange 事件
                this.elemValueChange(FormTypes.radio, row, column, value)
            },
            handleMultiSelectChange(value, id, row, column) {
                this.multiSelectValues = this.bindValuesChange(value, id, 'multiSelectValues')
                // 做单个表单验证
                this.validateOneInput(value, row, column, this.notPassedIds, true, 'change')
                // 触发valueChange 事件
                this.elemValueChange(FormTypes.list_multi, row, column, value)
            },
            handleSearchSelectChange(value, id, row, column) {
                this.searchSelectValues = this.bindValuesChange(value, id, 'searchSelectValues')
                this.validateOneInput(value, row, column, this.notPassedIds, true, 'change')
                this.elemValueChange(FormTypes.sel_search, row, column, value)
            },
            filterOption(input, option) {
                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            },
            getEllipsisWord(content, len) {
                if (!content || content.length === 0) {
                    return ''
                }
                if (content.length > len) {
                    return content.substr(0, len)
                }
                return content
            },

            /* --------------------------- 2020年5月18日 默认span模式 ------------------------------ */

            /** 获取Select等组件翻译后的文本 */
            getSelectTranslateText(value, row, col) {
                // 翻译支持单选和多选（数组、逗号分割）
                return filterDictText(col.options, value)
            },

            // 判定当前行是否是正在编辑的
            isEditRow(row, col) {
                if (this.alwaysEdit) {
                    return true
                }
                let current = this.currentEditRows[row.id]
                return !!(current && current[col.key] === true)
            },

            /* ---- 事件监听 ---- */

            // 鼠标弹起事件，用于清空输入状态
            handleMouseup(event) {
                if (this.alwaysEdit || Object.keys(this.currentEditRows).length === 0) {
                    return
                }
                // console.log(this.caseId + 'handleMouseup: ', event)
                let { target } = event
                if (!target) {
                    return
                }
                let className = target.className || ''
                if (typeof className === 'string') {
                    // 点击的标签是span
                    if (className.includes('j-td-span') && className.includes('no-edit')) {
                        return
                    }
                    // 点击的标签是下拉
                    if (className.includes('ant-select-dropdown-menu-item')) {
                        return
                    }
                }

                // 事件冒泡路径
                let path = getEventPath(event)
                for (let p of path) {
                    // 如果点击的是 tr 就不处理（tr单独处理）
                    if ((p.id || '').startsWith(`${this.caseId}tbody-tr`)) {
                        return
                    }
                    let pClassName = p.className || ''
                    pClassName = typeof pClassName === 'string' ? pClassName : pClassName.toString()

                    /* --- 特殊处理以下组件，点击以下标签时不清空编辑状态 --- */

                    // 点击的标签是JInputPop
                    if (pClassName.includes('j-input-pop')) {
                        return
                    }
                    // 点击的标签是JPopup的弹出层
                    if (pClassName.includes('j-popup-modal')) {
                        return
                    }
                    // 点击的标签是日期选择器的弹出层
                    if (pClassName.includes('j-date-picker') || pClassName.includes('ant-calendar-picker-container')) {
                        return
                    }

                }
                // 清空编辑状态
                this.currentEditRows = {}
            },

            // 添加事件监听
            addEventListener() {
                window.addEventListener('mouseup', this.handleMouseup)
            },
            // 移除事件监听
            removeEventListener() {
                window.removeEventListener('mouseup', this.handleMouseup)
            },
            /* --------------------------- 2020年5月18日 默认span模式 ------------------------------ */

            //获取没有授权的按钮编码
            loadExcludeCode() {
                if (!this.authPre || this.authPre.length == 0) {
                    this.excludeCode = []
                } else {
                    let pre = this.authPre
                    if (!pre.endsWith(':')) {
                        pre += ':'
                    }
                    this.excludeCode = getNoAuthCols(pre)
                }
            },
            //判断button是否显示
            buttonPermission(code) {
                if (!this.excludeCode || this.excludeCode.length == 0) {
                    return true
                } else {
                    return this.excludeCode.indexOf(code) < 0
                }
            }

        },
        beforeDestroy() {
            this.removeEventListener()
            this.destroyCleanGroupRequest = true
        }

    }
</script>

<style lang="less" scoped>

    .action-button {
        margin-bottom: 8px;

        .gap {
            padding-left: 8px;
        }

    }

    /* 设定边框参数 */
    @borderColor: #e8e8e8;
    @border: 1px solid @borderColor;
    /* tr & td 之间的间距 */
    @spacing: 8px;

    .input-table {
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: hidden;
        position: relative;
        border: @border;

        .thead, .tbody {

            .tr, .td {
                display: flex;
            }

            .td {

                /*border-right: 1px solid red;*/
                /*color: white;*/
                /*background-color: black;*/
                /*margin-right: @spacing !important;*/

                padding-left: @spacing;
                flex-direction: column;

                &.td-cb, &.td-num {
                    width: 45px;
                    min-width: 45px;
                    max-width: 50px;
                    margin-right: 0;
                    padding-left: 0;
                    padding-right: 0;
                    justify-content: center;
                    align-items: center;
                }

                &.td-ds {
                    width: 30px;
                    min-width: 30px;
                    max-width: 35px;
                    margin-right: 0;
                    padding-left: 0;
                    padding-right: 0;
                    justify-content: center;
                    align-items: center;

                    .td-ds-icons {
                        position: relative;
                        cursor: move;
                        width: 100%;
                        /*padding: 25% 0;*/
                        height: 100%;

                        .anticon-align-left,
                        .anticon-align-right {
                            position: absolute;
                            top: 30%;
                        }

                        .anticon-align-left {
                            left: 25%;
                        }

                        .anticon-align-right {
                            right: 25%;
                        }
                    }


                }

            }

        }

        .thead {
            overflow-y: scroll;
            overflow-x: hidden;
            border-bottom: @border;

            /** 隐藏thead的滑块   */

            &::-webkit-scrollbar-thumb {
                box-shadow: none !important;
                background-color: transparent !important;
            }

            .tr {
                min-width: 100%;
                overflow-y: scroll;
            }

            .td {
                /*flex: 1;*/
                padding: 8px @spacing;
                justify-content: center;
            }

        }

        .tbody {
            position: relative;
            top: 0;
            left: 0;
            overflow-x: hidden;
            overflow-y: hidden;
            min-height: 61px;
            /*max-height: 400px;*/
            min-width: 100%;

            .tr-nodata {
                color: #999;
                line-height: 61px;
                text-align: center;
            }

            .tr {
                /*line-height: 50px;*/

                border-bottom: @border;
                transition: background-color 300ms;
                width: 100%;
                position: absolute;
                left: 0;
                z-index: 10;

                &.tr-checked {
                    background-color: #fafafa;
                }

                &:hover {
                    background-color: #E6F7FF;
                }

            }

            .tr-expand {
                position: relative;
                z-index: 9;
                background-color: white;
            }

            .td {
                /*flex: 1;*/
                padding: 14px @spacing 14px 0;
                justify-content: center;

                &:last-child {
                    padding-right: @spacing;
                }

                input {
                    font-variant: tabular-nums;
                    box-sizing: border-box;
                    margin: 0;
                    list-style: none;
                    position: relative;
                    display: inline-block;
                    padding: 4px 11px;
                    width: 100%;
                    height: 32px;
                    font-size: 14px;
                    line-height: 1.5;
                    color: rgba(0, 0, 0, 0.65);
                    background-color: #fff;
                    border: 1px solid #d9d9d9;
                    border-radius: 4px;
                    transition: all 0.3s;
                    outline: none;

                    &:hover {
                        border-color: #4D90FE
                    }

                    &:focus {
                        border-color: #40a9ff;
                        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
                        border-right-width: 1px !important;
                    }

                    &:disabled {
                        color: rgba(0, 0, 0, 0.25);
                        background: #f5f5f5;
                        cursor: not-allowed;
                    }

                    /* 设置placeholder的颜色 */

                    &::-webkit-input-placeholder { /* WebKit browsers */
                        color: #ccc;
                    }

                    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                        color: #ccc;
                    }

                    &::-moz-placeholder { /* Mozilla Firefox 19+ */
                        color: #ccc;
                    }

                    &:-ms-input-placeholder { /* Internet Explorer 10+ */
                        color: #ccc;
                    }

                }

                .j-editable-image {
                    height: 32px;
                    max-width: 100px !important;
                    cursor: pointer;

                    &:hover {
                        opacity: 0.8;
                    }

                    &:active {
                        opacity: 0.6;
                    }

                }

                /* --------------------------- 2020年5月18日 begin 默认span模式 ------------------------------ */

                label {
                    height: 32px;

                    &.ant-checkbox-wrapper {
                        height: auto;
                    }
                }

                .j-td-span {
                    position: relative;
                    padding: 4px 11px;
                    border: 1px solid transparent;
                    display: inline-block;
                    width: 100%;
                    max-width: 100%;
                    height: 32px;
                    cursor: text;
                    transition: all 0.3s;
                    box-sizing: border-box;
                    font-size: 14px;
                    line-height: 1.5;
                    color: rgba(0, 0, 0, 0.65);
                    border-radius: 4px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;

                    &:hover {
                        background-color: white;
                    }

                    &.disabled {
                        cursor: not-allowed;

                        &:hover {
                            color: rgba(0, 0, 0, 0.25);
                            background-color: #F5F5F5;
                        }
                    }

                }

                /* --------------------------- 2020年5月18日 end 默认span模式 ------------------------------ */

                /* --------------------------- 2020年5月28日 begin 新增校验未通过的样式 ------------------------------ */

                .j-check-failed.j-td-span {
                    background-color: rgba(255, 0, 0, 0.05);

                    &:hover {
                        background-color: rgba(255, 0, 0, 0.1);
                    }
                }

                .j-check-failed.j-td-span,
                input.j-check-failed,
                .j-check-failed /deep/ input,
                .ant-select.j-check-failed /deep/ .ant-select-selection,
                .ant-upload.j-check-failed /deep/ .ant-btn {
                    border-color: red;
                    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.2);
                }

                /* --------------------------- 2020年5月28日 end 新增校验未通过的样式 ------------------------------ */

            }

        }

        .scroll-view {
            overflow: auto;
            overflow-y: scroll;
        }

        .thead, .thead .tr, .scroll-view {
            @scrollBarSize: 6px;
            /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

            &::-webkit-scrollbar {
                width: @scrollBarSize;
                height: @scrollBarSize;
                background-color: transparent;
            }

            /* 定义滚动条轨道 */

            &::-webkit-scrollbar-track {
                background-color: #f0f0f0;
            }

            /* 定义滑块 */

            &::-webkit-scrollbar-thumb {
                background-color: #eee;
                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

                &:hover {
                    background-color: #bbb;
                }

                &:active {
                    background-color: #888;
                }
            }

        }

        .thead .tr {

            &::-webkit-scrollbar-track {
                background-color: transparent;
            }

            /* IE模式下隐藏 */
            -ms-overflow-style: none;
            -ms-scroll-chaining: chained;
            -ms-content-zooming: zoom;
            -ms-scroll-rails: none;
            -ms-content-zoom-limit-min: 100%;
            -ms-content-zoom-limit-max: 500%;
            -ms-scroll-snap-type: proximity;
            -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
        }

    }

</style>
